2017-10-13 19 views
1

我正在使用索引在列表中生成键。但是,es-lint会为此生成一个错误。 React doc也声明使用item index作为key应该作为最后的手段。我想用react-key-indexnpm install react-key-index给出了以下错误:错误:不要在键中使用数组索引

npm ERR! code E404

npm ERR! 404 Not Found: [email protected]

是否有其他包,允许生成唯一的密钥有什么建议?任何关于反应密钥生成器的建议是赞赏!

+1

你的对象在'children'中看起来像什么?他们是否有ID或任何可以散列的数据来生成唯一的ID? – Nick

+0

如果一个列表从不重新排序(包括“插入”或“删除”等操作),那么索引是完全正确的。还有其他用例,例如下一页可以实际包含相同的项目(具有相同的ID)。在这种情况下,使用索引优于使用标识符。实际上,在大多数情况下,索引是完全正确的,因为部分更新不会发生在每个组件中。 – Sulthan

+0

在这种情况下,列表将重新排序 –

回答

1

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

假设父组件获取10个项目的数组并基于该数组呈现10个组件。假设第五项从数组中移除。在下一个渲染中,父项将收到9个项目的数组,因此React将渲染9个组件。这将显示为第10个组件被删除,而不是第5个组件,因为React无法区分基于索引的项目。

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

您可以使用任何唯一的子对象字段作为关键字来生成您自己的唯一关键字。正常情况下,可以使用子对象的任何id字段。

编辑:如果组件创建并管理自己的状态,您将只能看到上述行为,例如,在不受控制的文本框,定时器等中。 React error when removing input component

+1

我没有关注这个例子 - 你能提供一个可以重现这个问题的例子吗?我经常使用数组,并从未遇到过这种类型的问题。 – lux

+0

@lux也许我无法正确解释。希望这个链接将有所帮助。 https://stackoverflow.com/questions/46477711/react-error-when-removing-input-component – palsrealm