不变违规：使用 flatList 时，文本字符串必须在 <Text> 组件中呈现

Question

我正在使用平面列表来显示来自 unsplash api 的数据。但是在这里它一直抱怨说这个

Invariant Violation: Text strings must be rendered within a component

我什至没有使用任何文本组件。我不知道这里出了什么问题。

App.js

export default function App() {
  const [loading, setLoading] = useState(true);
  const [image, setImage] = useState([]);
  const {height, width} = Dimensions.get('window');


  const URL = `https://api.unsplash.com/photos/random?count=30&client_id=${ACCESS_KEY}`;
  useEffect(() => {
    loadWallpapers();
  }, [])


  const loadWallpapers =() =>  {
    axios.get(URL)
    .then((res) => {

      setImage(res.data);
      setLoading(false);
    }).catch((err) => {
      console.log(err)
    }).finally(() => {
      console.log('request completed')
    })
  } 
  const renderItem = (image) => {
    console.log('renderItem', image);
    return (
      <View style={{height, width}}>
        <Image 
        style={{flex: 1, height: null, width: null}} 
        source={{uri : image.urls.regular}}/>

      </View>
    )
  }
  return loading ? (
    <View style={{flex: 1, backgroundColor: 'black', justifyContent: 'center',alignItems: 'center'}}>
      <ActivityIndicator size={'large'} color="grey"/>
    </View>
  ): (
    <SafeAreaView style={{flex: 1, backgroundColor: 'black'}}>
      <FlatList
        horizontal
        pagingEnabled
        data={image}
        renderItem={({ item }) => renderItem(item)} />}
      />
    </SafeAreaView>
  )
}

Answer 1

我觉得 Flatlist 的数据是空的，试试

  <FlatList
    horizontal
    pagingEnabled
    data = {image ? image : []}
    renderItem={({ item }) => renderItem(item)} />}
  />

Answer 2

我需要做这样的事情才能让它发挥作用。

const renderItem = ({ item }) => {   <---- I have destructured item here 
console.log(item)
    return (
      <View style={{ flex: 1 }}>

      </View>
    );
  };

<FlatList
          scrollEnabled={!focused}
          horizontal
          pagingEnabled
          data={image}
          renderItem={renderItem}
        />

不变违规：使用 flatList 时，文本字符串必须在 <Text> 组件中呈现

Invariant Violation: Text strings must be rendered within a <Text> component while using flatList

reactjs

react-native

react-native-android

react-native-flatlist