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

Answer 2

您错误地使用了async / await。不是调用.then，而是将调用await 分配给一个变量（或者如果它没有返回值，则不分配它）并将对await 的调用（或调用）包装在try / catch 块中. await 关键字将自动处理resolve 和reject，以便您获得适当的信息。

retrieveData = async () => {
  try {
    const data = JSON.parse(await AsyncStorage.getItem("userFavorites"))
    this.setState({ favPro: data })
  } catch (error) {
    console.error(error)
    this.setState({ favPro: [] })
  }
}

您还需要传递一个数组，您的数据的形状看起来像一个对象，但它应该是一个对象数组。这不是一个非常困难的转换，如果您需要，我可以提供一个辅助函数。

编辑：如果需要将对象转为数组，可以使用reduce函数

const data = {
  '44': { a: 2 },
  '55': { b: 3 },
}

const dataArr = Object.keys(data).reduce(
  (arr, key) => arr.concat(data[key]),
  []
)

通过使用Object.keys，我们可以按名称为每个对象。然后调用reduce 和Object.keys 返回的数组，传递一个函数作为第一个参数，一个空数组作为第二个参数。第二个参数作为第一个参数arr自动传递给函数，我们传递的函数的第二个参数是对象的键。然后只需使用concat 将对象添加到数组即可。

Array.reduce 乍一看可能有点不知所措，但它是一种非常强大的方法，你可以用它完成很多工作。