时间戳

首页 > 解决方案 > 如何异步更新状态内的项目

reactjs - 如何异步更新状态内的项目

问题描述

我有以下状态：

this.state = {
  data: [
    {id: 1212, cat:"cat1"},
    {id: 13123, cat:"cat1"},
    {id: 1212, cat:"cat2"},
    {id: 13123, cat:"cat2"},
    {id: 1212, cat:"cat3"},
    {id: 13123, cat:"cat3"},
    {id: 1212, cat:"cat4"},
    {id: 13123, cat:"cat4"},
    ..
  ]
}

我有 ids 和 cat （类别）。所有数据都是动态的。我不知道每次都会获取哪些 id 和 cat

in the componentDidMount(){
  // I fetch the latest data and sort it based on cat and  `setState` for `this.state.data`
}

in the componentDidUpdate(){
  // I will get the all the unique cats from this.state.data and store it in an array.
  // I will loop over the unique cats and fetch some more data related to each cat. But this will be aynchronous
  // Now how to add the fetched data for each cat at all the places wherever that cat is there in the this.state.data

  // i.e
    i am expecting this.state.data to be
      {
        data: [
          {id: 1212, cat:"cat1", extra:'....'},
          {id: 13123, cat:"cat1", extra:'....'},
          {id: 1212, cat:"cat2", extra:'....'},
          {id: 13123, cat:"cat2", extra:'....'},
          {id: 1212, cat:"cat3", extra:'....'},
          {id: 13123, cat:"cat3", extra:'....'},
          {id: 1212, cat:"cat4", extra:'....'},
          {id: 13123, cat:"cat4", extra:'....'},
          ..
        ]
      }

}

如何根据特定猫异步向数据添加新属性。

标签： reactjs

解决方案

您不能更新 内部的状态componentDidUpdate，因为它会立即导致无限循环。你更新状态，组件重新渲染，componentDidUpdate调用，你更新状态等等。

相反，您需要将所有这些信息放入您的componentDidMount钩子中。setState这里可以多次调用。

进行初始提取，并将数据设置为您的状态。然后，在同一方法中，进行后续数据提取。当您收到新数据时，更新本地方法变量data并setState使用新版本的data.

推荐阅读