在 reactjs 中更新状态时出错

Question

我正在更新收到错误的应用程序的状态 错误：对象作为 React 子对象无效（找到：带有键 {id} 的对象）。如果您打算渲染一组子项，请改用数组。

我有反应页面，我使用烧瓶作为后端获取数据（使用 fetch 调用 restapi） 然后我在表格中显示数据并使用材料表。 https://material-table.com/#/

在表格上，我可以选择编辑行并更新行的值（可以选择仅编辑单行） 编辑该行时，我单击“保存”按钮将数据保存在后端。 数据正在后端更新，然后成功更新值我再次获取更新的数据

我想摆脱这一步 - 在更新后再次获取数据，因为数据很大，大约 200K 记录，渲染数据需要 2-3 分钟（我不希望用户再次重复 2每次更新行时 -3 分钟。我也使用了分页，但它对我没有多大帮助，因为我可以选择搜索列，并且在分页的情况下，它只会在所选页面上搜索）

这样就免去了再次从数据库中获取数据的步骤

我已执行以下步骤 1）我知道值被更改的索引让我们说它在 indexChange 2）我知道新值，假设它保存在变量 newValue 中 3) 状态 this.state.data 是数组。 所以我在这个数组上循环，当数组索引等于 indexchange 时，我正在更新数组值 4) 然后使用 this.setState({data: newState}) 更新所需的状态

代码如下

replaceStateObject(oldval, newval){
      var newState = this.state.data;
      var changedIndex = oldval['tableData']['id']
      newState.forEach(function(part, index, theArray) {
        if(index == changedIndex)
          theArray[changedIndex] = newval;
      });
      this.setState({data: newState})
}

在 this.setState({data: newState}) 行我收到错误 “错误：对象作为 React 子项无效（找到：带有键 {id} 的对象)。如果您打算渲染一组子项，请改用数组。"

谁能让我知道我做错了什么以及如何解决此问题或更新状态而无需再次调用后端服务。

Answer 1

replaceStateObject(oldval, newval){
      // var newState = this.state.data;
      let changedIndex = oldval['tableData']['id']
      /* newState.forEach(function(part, index, theArray) {
        if(index == changedIndex)
          theArray[changedIndex] = newval;
      });*/
      let newState = this.state.data.map((item,index) =>{
        if(index === changedIndex) return newval;
        return item;
      });
      this.setState({data: newState})
}

尝试使用map() 而不是forEach()