固定冲突：<Text>使用 flatList 时，必须在组件中呈现文本字符串

Question

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

固定冲突：文本字符串必须在组件中呈现

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

应用.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
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}
/>