錯誤：文本字符串必須在<text>零件</text>

Question

我正在制作一個可以制作購物清單的應用程序，並且想要進行語音輸入，但它給了我錯誤：文本字符串必須在組件內呈現

{this.state.results.map((text, index) => {
                           return (
                              <Text key={index}>
                                 Mensagem: {this.state.results}
                              </Text>
                           );
                        })}```

Answer 1

我不熟悉 react-native，但聽起來Text組件需要一個字符串，但還有其他內容。 this.state.results聽起來像一個數組，對嗎？ 如果您嘗試為每個結果呈現某些內容，則需要執行以下操作：

return (
    <div>
        {this.state.results.map(result => (
            <Text key={index}>
                 Mensagem: {result}
            </Text>
        ))}
    </div>
);

如果結果數組中的每個 object 都是實際的 object 而不是字符串，則需要使用{result.name}類的屬性或任何合適的屬性。

Answer 2

確保您從“react-native”而不是“react-native-web”引入內置組件。 這就是我能夠解決我的問題的方式。

從“react-native”導入 {View, Text, .....}

Answer 3

您發布的代碼沒有任何問題。
問題是隱藏在 JSX 中某處的字母、數字或其他字符。 這通常發生在您不經意間意外按下按鈕時。

這不會在您的 IDE（例如 Visual Studio 代碼）中顯示為警告。 您可以通過注釋掉代碼的不同部分來嘗試縮小問題所在，如果您沒有收到錯誤，您就知道您已經找到了隱藏錯誤字符的代碼片段。

我什至將你的代碼插入到我的一個 react native 項目中，只是為了確認它可以工作。

{["H", "E", "L", "L", "O"].map((text, index) => {
    return (
        <Text key={index}>
            Mensagem: {text}
        </Text>
    );
})}

對於不熟悉反應原生錯誤消息或文本組件的每個人。 只要您不向其中插入對象，文本組件處理 arrays 就沒有問題。 當您將 object 傳遞給 react 本機 Text 組件時，您會收到此錯誤：“對象作為 React 子對象無效”。