Question

我正在更新我的应用程序的状态，得到错误错误：对象作为React子对象无效（找到：键为{id}的对象）。如果要渲染子级集合，请改用数组。

我有react页面，在该页面上我使用flask作为后端来获取数据（使用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()

在React.js中更新状态时出现错误

1 个答案: