reactjs - React：删除具有相同键和相同道具的组件之一时的混淆结果

Question

我正在学习 React 键是如何工作的。我使用带有对象列表的数组来生成 React 元素列表，其中有两个元素具有相同的键和相同的道具。当我通过单击删除按钮删除第一个元素时，屏幕上有树元素（2、2、2），预期结果是两个（2、2）。这让我很困惑。有谁知道这个混淆结果的原因？有一个演示链接。

const COMPONENT_LIST = [
  { key: 1, value: 1, id: 1 },
  { key: 2, value: 2, id: 2 },
  { key: 2, value: 2, id: 3 }
];

class App extends React.Component {
  state = {
    arr: COMPONENT_LIST
  };

  render() {
    return (
      <>
        <button
          onClick={() => {
            this.setState({
              arr: COMPONENT_LIST
            });
          }}
        >
          Recover
        </button>
        <ul>
          {this.state.arr.map(item => (
            <li key={item.key}>
              {item.value}
              <button
                onClick={() => {
                  this.setState({
                    arr: this.state.arr.filter(ele => item.id !== ele.id)
                  });
                }}
              >
                Delete
              </button>
            </li>
          ))}
        </ul>
      </>
    );
  }
}

标签： reactjs