渲染錯誤文本字符串必須在文本組件內渲染

Question

問題：我正在使用存儲在 google URL 中的 Flatlist 顯示所有 BOOKS imgs。 我正在使用世博會。 當我在帶有 expo 的瀏覽器中打開應用程序時，它可以工作。 但是當我在手機上運行它時，它會顯示一個錯誤，如下所示。

錯誤：呈現錯誤：文本字符串必須在組件內呈現，代碼如下：

import React, { Component } from 'react';
import {
  Text,
  View,
  Image,
  TextInput,
  FlatList,
  SectionList,
  StyleSheet,
  Button,
} from 'react-native';
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      bookName: 'javascript',
    };
  }
  componentDidMount() {
    this.fetchApi();
  }
  fetchApi = async () => {
    let apiKey = 'AIzaSyDxoyfayTuP-hFon-b-nuzGjPdDAbpIPCY';
    const response = await fetch('https://www.googleapis.com/books/v1/volumes?q=' + this.state.bookName + '&key=' + apiKey + '&maxResults=5');
    const json = await response.json();
    this.setState({ data: json.items });
  };
  render() {
    return (
      <View style={styles.container}>
        <Text
          style={{
            fontFamily: 'Arial',
            fontSize: 20,
            fontWeight: 'bold',
            fontStyle: 'underline',
            color: 'yellow',
            marginTop: -300,
          }}>
          <Text>Random Users Data</Text>
        </Text>
        <View
          style={{
            width: 210,
            height: 50,
            marginTop: 50,
            justifyContent: 'center',
          }}>
          <TextInput
            style={{
              width: 210,
              height: 45,
              fontSize: 18,
              borderWidth: 3,
              borderRadius: 12,
              borderColor: 'royalblue',
              textAlign: 'center',
              backgroundColor: 'white',
            }}
            placeholder="Enter book name"
            onChangeText={(item) => this.setState.bookName(item)}
          />{' '}
        </View>
        <View>
          <FlatList
            data={this.state.data}
            keyExtractor={(x, i) => i}
            renderItem={({ item }) => (
              <View>
                <View style={{ marginTop: 200 }}>
                  <Image
                    style={{ width: 128, height: 204, margin: 10 }}
                    source={{ uri: item.volumeInfo.imageLinks.thumbnail }}
                  />
                </View>
              </View>
            )}
          />
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'black',
  },
});
export default App;

Answer 1

刪除{' '} 。 您可能在處理項目時不小心添加了它，但 React 將它解釋為一個空格並抱怨在文本組件之外找到文本。