为什么在React中使用索引作为键可能是一个坏主意？
假设您有一个项目列表，并且想要在React应用程序中将它们显示为ul, li元素。 当用户单击列表项之一时，您要删除该项并重新呈现列表。 在React中，您将执行以下操作（为简便起见，仅显示相关代码。完整示例在此处：https：//codesandbox.io/s/pkqrj851nq） 请注意，即使删除了正确的项目， leave过渡如何也始终应用于列表中的最后一个项目？ 这不是我们想要的，是吗？ 原因是因为您没有为列表中的每个子元素传递唯一键。 没有唯一键，React无法区分是删除元素还是仅更改内容。 因此，当您删除列表中的第一项时，React的diff算法认为只有内容被更改了，因为key没有更改。 因此，它只会更新内容，而不会从DOM中物理删除第一个元素，因此不会应用leave动画。 但是当涉及到最后一个元素时，由于已经从列表中删除了一个项目，React 认为最后一个项目已被删除，并且实际上从DOM中删除了最后一个项目，因此应用了leave动画。 要解决此问题，我们只需要确保为每个子元素传递唯一的key 。 对于我们的情况，我们可以只传递项目名称，而不是index 。 {this.state.fruits.map（（fruit，…
