React.js为什么删除注释（数组中的项目）会导致所有内容移位

Question

我正在研究创建便笺的这个爱好项目，通过单击便笺上的x，您可以看到该便笺没有按预期消失，但是该便笺中的内容消失了，但其余便笺也更改，为什么呢，这是codesanbox的链接，谢谢！ https://codesandbox.io/s/epic-hugle-1o2o2

Answer 1

渲染元素数组时，您需要为每个项目使用key。

阅读https://reactjs.org/docs/lists-and-keys.html了解更多详细信息。

这是您的代码的修补程序：https://codesandbox.io/s/keen-snow-yqitv

基本上在创建新笔记时添加一个键，并在呈现项目时使用它。

  add = note => {
    var temp = this.state.notes;
    temp.push({ key: Math.random().toString(), note });
    this.setState({ notes: temp });
  };

---

（示例代码仅使用Math.random来生成密钥，该密钥对于生产用途而言并不安全。请参见https://github.com/kelektiv/node-uuid#readme以获取更好的方法）

您可能还想查看代码以免改变状态。