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

Why can I not map keys onto React component

本文关键字：React 组件 映射 不能 为什么      更新时间：2023-09-26

我的渲染看起来像这样：

<ul>{liElements}</ul>

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

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

我理解键的值，但是在这种情况下它们没有价值，因为组件的值都不会改变，特别是因为在没有键的情况下，"react 无论如何都将数组位置作为键"，完美！我想要那个，为什么它坚持给我发送一条错误消息，让我知道它们是必要的，我知道它不知道它们是不必要的，也不知道它们是必要的，那么黄色警告如何？

我知道我可以忽略它，但是总是将消息日志保存到控制台非常烦人(特别是因为此消息可能在其他地方有用(

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>'

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

假设你有一个你想成为 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 中，为了让 React 知道你要尝试和操作哪个确切的元素，你需要传递一个特定的键。这样，您可以执行诸如onClick处理程序之类的操作。诸如此类的东西。
此外，React 使用这些特定的键来提高渲染性能。因此，即使您认为这是不必要的，并且在不传递密钥时最终结果是相同的。它仍然非常重要，因为 React 不必在每次渲染时为每个项目生成一个键。

最后当你去渲染它时。 

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

编辑

对于戴夫在评论中所说的..键是在对象创建时创建的，又名 React.createElement(...) 。在它们创建之后，它们是不可变的。同样，这是因为您正在创建一棵树。如果您尝试手动更改键，则必须"重新键入"整个树结构，这是一个坏主意(这就是为什么它是只读的(。键是 react 使用的内部东西，但是当你渲染动态元素时，你需要指定键，这样就不会有重复的键。

编辑 2

这里有一些有用的链接

我给出的关于钥匙
的另一个答案反应动态子文档
键的重要性 - 示例
动态元素以及错误方法的示例

如果你试图设置键，我相信你必须像这样在 li 元素本身中设置它们：

<li key={index}>list item</li>
相关文章：