在reactjs中更新状态时获取错误

Question

我正在更新我的应用程序的状态，获取错误:对象作为一个React子对象无效(找到:带有键{id}的对象)。如果您打算呈现一个子集合，请使用数组代替。

我有使用烧瓶作为后端(使用fetch调用restapi)获取数据的react页面，然后在表中显示数据并使用Material。https://material-table.com/#/

在表中，我有一个选项来编辑行和更新行的值(有只编辑一行的选项)，在编辑行时，我单击save按钮将数据保存在后端。数据在后端得到更新，然后在成功更新值时，我将再次获取更新后的数据。

我想摆脱这个步骤-更新后再次获取数据，因为数据大约是200 K记录，呈现数据需要2-3分钟(我不希望用户每次更新行时再重复2-3分钟)。我也使用过分页，但是它对我没有多大帮助，因为我可以选择搜索列，如果分页，它将只在选定的页面上搜索)

因此，要摆脱再次从数据库中获取数据的步骤

我已经执行了以下步骤1)我知道值被更改的索引(假设它在indexChange 2中)，我知道新的值，假设它保存在变量newValue 3中)状态this.state.data是数组。因此，我正在遍历这个数组，当数组索引等于索引时，我将更新数组值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})中，我正在获取错误" error : object作为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()