reactjs - 了解 React 中键的使用

Question

我在 React 中有一个简单的列表渲染示例：

  render() {
    return (
      <ul>
        {this.state.cards.map(({ data }, index) => (
          <li key={index} onClick={() => this.remove(index)}>
            {data}
          </li>
        ))}
      </ul>
    );
  }

  remove = index => {
    let cards = this.state.cards.filter((card, i) => i != index);
    this.setState({ cards });
  };

在这里，我使用索引作为键，即使在谷歌中搜索 React 中的键并阅读手册后，我仍然不明白：

remove函数会更改索引，从而更改列表中某些元素的键（因此，如果我删除了 2 号元素的所有键，则它会更改）。

所以我实际上希望这个函数总是删除列表中的最后一项，因为每次只删除这个键，但令人惊讶的是它是否按“应该”的方式工作并且每次都删除正确的元素 - 当我查看 Chrome 中的 React 控制台，我看到它更改了键，但没有删除并再次创建那些键已更改的元素...

我对这里发生的事情感到非常困惑（（⇀‸↼））