Question

我的渲染看起来像这样：

<ul>{liElements}</ul>

liElements是使用for-of循环创建的<li>word</li>数组。

（为了论证，我无法访问创建该数组的函数）

我理解键的价值，但是在这种情况下它们没有价值，因为没有任何组件的值会发生变化，特别是因为没有键，＆＃34;反应需要数组位置为键＆＃34;无论如何，完美！我想要那个，为什么它坚持要给我发一条错误信息让我知道它们是必要的，我知道它不知道它们没有必要，它也不知道它们是必要的那么黄色警告怎么回事？

我知道我可以忽略它，但总是将消息日志安装到控制台是非常烦人的（特别是因为这条消息在其他地方很有用）

react.js:19287 Warning: Each child in an array or iterator should have a unique "key" prop

因为我能做到

liElements[0].key // null

我以为我可以做到

liElements.map(function(a,i){a.key=i;});
<ul>{liElements}</ul>

唉;

bundle.js:39123 Uncaught TypeError: Cannot assign to read only property 'key' of object '#<Object>'

为什么只读？无论如何，我收到数组后，我可以分配这些完全不必要的密钥，以便错误信息停止显示？

Answer 1

假设您有一个想要成为li的项目列表

let items = ['item 1', 'item 2', 'item 3', 'item 4', 'item 5']

let elems = items.map( (item, index) => { return <li key={index}>{item}</li> }

您希望映射列表，并指定密钥。为什么这样？因为您正在将树渲染到DOM中，并且为了知道要尝试和操作哪个确切元素，您需要传递特定键。通过这种方式，您可以执行onClick处理程序等操作。
另外，React使用这些特定的键来提高渲染性能。所以，即使你认为它是不必要的，最后的结果是不相同的。它仍然非常重要，因为React不必为每个渲染的每个项目生成一个键。

最后当你去渲染它。

return (
    <ul>
        {elems}
    </ul>
)

修改

Dave在评论中说的内容。密钥是在对象创建时创建的，即React.createElement(...)。创建之后，它们是不可改变的。再次，这是因为你正在创建一个树..如果你试图手动更改一个键，那么整个树结构必须是're-keyd'这是一个坏主意（这就是为什么它是只读的）。关键是反应使用的内部事物，但是当你渲染动态元素时，你需要指定键，这样就没有重复的键。

编辑2

为您提供一些有用的链接

Another Answer I Gave Regarding Keys
React Dynamic Children Documentation
Importance of Keys - Example
Dynamic elements with examples of wrong ways to do it

Answer 2

如果您正在尝试设置密钥，我相信您必须将它们设置在li元素中，如下所示：

<li key={index}>list item</li>

为什么我不能将键映射到React组件

2 个答案:

修改

编辑2