React总结7:Each child in an array or iterator should have a unique "key" prop.的处理方法-优快云博客

本文链接：https://blog.youkuaiyun.com/juzipchy/article/details/74834973

本文解释了React中使用key的重要性及其实现方式。当渲染列表时，为每个元素提供唯一的key有助于提升性能，确保DOM结构完整性和正确更新。文章还介绍了如何获取key值，并强调了key值的唯一性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

PS:当你在写react的时候报了类似于这样子的错：Each child in an array or iterator should have a unique “key” prop.

解决办法只要在循环的每个子项添加一个key就行了，代码如下：

var names = ['Alice', 'Emily','Kate'];

ReactDOM.render(
    <div>
        {
          names.map(function (name, key) {
            return <div key={key}>Hello, {name}!</div>
          })
        }
    </div>,
    document.getElementById('example')
);

原因如下:

 react的key关乎到react的dom-diff算法 react中对于dom的操作是根据生成的data-reactid进行绑定的，添加key可以保证dom结构的完整性，而不会根据react自己对dom标记的key进行重新分配 react每次决定重新渲染的时候，几乎完全是根据data-reactid来决定的，最重要的是这个机制

dom-diff是指：所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上。它可以极大提高网页的性能表现。

7.20补：
key是专门为React服务的，但是它不会传递给你的组件，也就是说，在组件中，你无法通过props.key来获取它的值，但是它又绑定到了组件中，作为组件的属性而存在，然而，你无法通过this.key,或者是通过参数获取它，它是React特殊处理的。

如果你想获得key的值只能另外设置一个值，然后通过props属性对象获取key的值，如下：

const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);

另外标识一个id属性来传递key的值。

key值的唯一性

兄弟元素之间的key值必须是唯一的，当然不是全局唯一，只是对当前作用域的相关兄弟元素。

function Blog(props) {
  const sidebar = (
    <ul>
      {props.posts.map((post) =>
        <li key={post.id}>
          {post.title}
        </li>
      )}
    </ul>
  );
  const content = props.posts.map((post) =>
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  );
}