错误：不要在键中使用数组索引

Question

我正在使用索引来生成列表中的密钥。但是，es-lint会为此产生一个错误。React
doc还指出，应将使用项目索引作为键作为最后的选择。

const list = children.map((child, index) =>
    <li key={index}> {child} </li>);

我考虑过使用react-key-index。 npm install react-key-index给出以下错误：

npm ERR! code E404

npm ERR! 404 Not Found: react-key-index@latest

关于允许生成唯一密钥的其他软件包有什么建议吗？关于反应密钥生成器的任何建议，我们将不胜感激！

Answer 1

当您使用数组的索引作为键时，React会优化并且不会按预期呈现。在这种情况下会发生什么可以用一个例子来解释。

假设父组件获取一个包含10个项目的数组，并基于该数组渲染10个组件。假设然后从数组中删除第5个项目。在下一次渲染时，父级将接收9个项目的数组，因此React将渲染9个组件。这将显示为删除的第10个组件，而不是第5个组件，因为React无法根据索引区分项目。

因此，始终使用唯一的标识符作为从项目数组中呈现的组件的键。

您可以通过使用唯一的子对象的任何字段作为键来生成自己的唯一键。正常情况下，可以使用子对象的任何id字段（如果有）。

编辑：如果组件创建并管理自己的状态，例如在不受控制的文本框，计时器等中，您将只能看到上述行为发生。