Javascript 反应显示未正确更新

我正在更新react状态中用于显示列表的对象。状态正确更新，但显示中断

这是生成列表的渲染函数内部的代码部分

this.state.shoppingItems ? this.state.shoppingItems.currentShoppingItems.map((item, index) => {
    console.log(item)
    return <ItemSummary key={index} onClickHandler={this.selectItem} updateShoppingItem={this.updateCurrentShoppingItem} shoppingItem={item} removeFromCurrentItems={this.removeFromCurrentItems} addToCurrentList={this.addToCurrentList} />
}) : undefined} 

这是我删除项目之前的列表。

以下是我删除中间项后的列表：

最后是console.log输出，它显示项目已正确更新，但显示未更新：

---

我对来自角度的反应是全新的，所以我不知道这是正确的方法还是有更好的方法。但是有人能帮我弄清楚为什么显示器没有更新吗

问题是

购物项目的更新。保存对当前状态对象的引用，对其进行修改，然后将其存储回状态。首先将
this.state.shoppingItems
扩展到一个新对象中，将创建一个新的对象引用，以便react获取更改

React使用前一个状态和属性值与下一个状态和属性值的浅层对象比较来计算需要重新提交给DOM和屏幕的内容

removeFromCurrentItems(shoppingItem) {
  const items = this.state.shoppingItems.currentShoppingItems.filter(item => item._id !== shoppingItem._id);

  const shoppingItems = {...this.state.shoppingItems};
  shoppingItems.currentShoppingItems = items;
  shoppingItem.number = 0;
  shoppingItem.completed = false;
  shoppingItems.previousShoppingItems.push(shoppingItem);
  this.setState({
    shoppingItems: shoppingItems
  });
  // call to API to update in database
}

这个问题似乎是地图上项目的关键。我用数据库中的项目id替换了索引，如下所示，现在它正确呈现

return <ItemSummary key={task._id} updateShoppingItem={this.updateCurrentShoppingItem} shoppingItem={task} removeFromCurrentItems={this.removeFromCurrentItems} addToCurrentList={this.addToCurrentList} />

返回

类似的答案如下：
我的应用程序也有类似的问题，我不得不删除所做的评论

<textarea disabled key={note._id} className="form-control">{note.note}</textarea>

{note.note}


但是，当我将Key属性添加到列表项时，问题得到了解决。
谢谢，我尝试了这个方法，但不幸的是，它仍然产生相同的输出，其中对象正确更改，但显示没有正确更新。在您设置状态的组件中的其他位置有一些，修改状态的组件，如我更新的removeFromCurrentItems，使用您在代码中更改的同一行，然后还有调用API的componentDidMount，并在结果集上设置初始ShoppingItems。仅当我删除的项目不是最后一个项目时，才会发生错误array@sunalive有很多活动部件需要拆卸数组中的项。你能发布一个复制这个问题的最小代码沙盒吗？调试会更快。
return <ItemSummary key={task._id} updateShoppingItem={this.updateCurrentShoppingItem} shoppingItem={task} removeFromCurrentItems={this.removeFromCurrentItems} addToCurrentList={this.addToCurrentList} />

<textarea disabled key={note._id} className="form-control">{note.note}</textarea>