Javascript 反应本机平面列表对象显示

我从AsyncStorage中检索到以下对象，我希望将其显示在

平面列表中，但出现以下错误：

不变冲突：不变冲突：不变冲突：不变冲突：不变冲突：尝试获取超出范围索引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) {

    } 
}

我在
平面列表中呈现项目的方法定义如下：

 fav = ({ item }) => {
    return (
      <View>
      <Text>{item.pro_id+ item.pro_name}</Text>
      </View>
    )
}

如何使用
FlatList
组件显示JSON数据？
组件需要
数据的数组输入。根据您的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}
/>

//根据对象的值将对象转换为数组。如果favPro没有
//有效（即在网络请求期间，默认为空数组）
const data=this.state.favPro？Object.values（this.state.favPro）：[]
item.pro_id}
/>
组件要求
数据的数组输入。根据您的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}
/>

//根据对象的值将对象转换为数组。如果favPro没有
//有效（即在网络请求期间，默认为空数组）
const data=this.state.favPro？Object.values（this.state.favPro）：[]
item.pro_id}
/>
您不正确地使用了
async/await
。不要调用
。
然后将调用分配给
wait
变量（如果变量没有返回值，则不分配），并将调用包装到
try/catch
块中的
wait
。wait关键字将自动处理
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
将对象添加到数组中即可

一开始似乎有点让人不知所措，但这是一种非常强大的方法，您可以用它完成很多工作。
您使用的是
async/await
。不要调用
。
然后将调用分配给
wait
变量（如果变量没有返回值，则不分配），并将调用包装到
try/catch
块中的
wait
。wait关键字将自动处理
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
将对象添加到数组中即可

一开始可能看起来有点势不可挡，但这是一个非常强大的方法，您可以用它完成很多工作。
不变冲突：不变冲突：不变冲突：不变冲突：不变冲突：尝试获取超出范围索引的帧不变冲突：不变冲突：不变冲突：不变冲突：尝试获取帧对于超出范围的索引，虽然Dacre的答案解决了问题，但是如果你不介意了解更多信息，你能证明一个帮助函数吗。@othmansafadi当然我添加了一些示例代码！别忘了接受Dacre的答案和对您有帮助的upvote答案谢谢，如果您不介意我如何从该列表或AsyncStorage中删除一个项目，更具体地说，pro_id=x？减少时，您只需检查，
if（！data[key].id==unwantedId）
，因此与
unwantedId
匹配的任何内容都不会添加到列表中。虽然Dacre的答案解决了问题，但如果您不介意了解更多信息，您能否证明一个帮助函数。@othmansafadi我确实添加了一些示例代码！别忘了接受Dacre的答案和对您有帮助的upvote答案谢谢，如果您不介意我如何从该列表或AsyncStorage中删除一个项目，更具体地说，pro_id=x？减少时，只需检查，
如果（！data[key].id==unwantedId）
则与
unwantedId
匹配的任何内容都不会添加到列表中