我从 AsyncStorage 中检索了以下对象,我想将其显示在 FlatList
中,但出现以下错误:
Invariant Violation:Invariant Violation:Invariant Violation:Invariant Violation:Tried to get frame for out of range index NaN
我的 JSON 格式是:
Object {
"44": Object {
"pro_id": "44",
"pro_img": "url",
"pro_name": " S4 ",
},
"52": Object {
"pro_id": "52",
"pro_img": "url",
"pro_name": " S4 ",
},
}
上面的 JSON 是从 AsyncStorage
中检索的,如下所示:
retrieveData = async () => {
try {
await AsyncStorage.getItem('userFavorites')
.then(req => JSON.parse(req))
.then(json => this.setState({ favPro:json }))
} catch (error) {
}
}
我在 FlatList
中呈现项目的方法定义如下:
fav = ({ item }) => {
return (
<View>
<Text>{item.pro_id+ item.pro_name}</Text>
</View>
)
}
最后,我将 FlatList
渲染如下:
<FlatList
data={this.state.favPro}
renderItem={this.fav}
keyExtractor={item => item.pro_id}
/>
如何使用 FlatList
组件显示我的 JSON 数据?
最佳答案
FlatList
组件需要 data
属性的数组输入。根据您的 JSON 格式,您似乎传递的是对象而不是数组。
考虑对渲染方法进行以下调整:
// Convert object to array based on it's values. If favPro not
// valid (ie during network request, default to an empty array)
const data = this.state.favPro ? Object.values(this.state.favPro) : []
<FlatList
data={data}
renderItem={this.fav}
keyExtractor={item => item.pro_id}
/>
关于javascript - React Native FlatList 对象显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52842805/