为什么在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,…