javascript - React Native FlatList 对象显示

Question

我从 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 数据？

Answer 1

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}
/>