React控制台提示‘each child should have a unique "key" prop’报错，求原因及解决方案

警告含义 #

这个警告是React针对列表渲染的提示：React需要通过唯一的key属性来追踪列表中的每个元素。当列表数据发生变化（比如新增、删除、排序）时，React依赖key来精准判断哪些元素需要更新、哪些可以复用，从而优化DOM更新性能。如果没有显式设置key，React会默认用元素在列表中的索引作为key，但这在列表元素顺序变动时，会导致React错误地复用组件，引发组件状态错乱、不必要的重渲染等问题。

解决办法 #

• 使用数据自带的唯一标识：这是最优方案，比如后端返回的id、uuid等天生唯一的字段，能确保每个元素的key稳定且唯一。

  const todoItems = [{ id: 1, text: '买菜' }, { id: 2, text: '整理房间' }];
  
  function TodoList() {
    return (
      <ul>
        {todoItems.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
  

• 手动生成稳定的唯一key：如果数据没有自带唯一标识，可以提前为每个元素生成唯一值（比如用浏览器的crypto.randomUUID()），注意不要在渲染函数内动态生成，否则每次渲染都会生成新的key，导致组件反复挂载卸载。

  const rawItems = [{ text: '看书' }, { text: '运动' }];
  // 提前给数据添加唯一key
  const items = rawItems.map(item => ({
    ...item,
    key: crypto.randomUUID()
  }));
  
  function ItemList() {
    return (
      <ul>
        {items.map(item => (
          <li key={item.key}>{item.text}</li>
        ))}
      </ul>
    );
  }
  

• 谨慎使用索引作为key：仅当列表是完全静态的（不会增删元素、不会改变顺序）时，才临时使用索引作为key。动态列表用索引会引发潜在的状态问题，不推荐。

  const staticItems = ['苹果', '香蕉', '橙子'];
  
  function StaticList() {
    return (
      <ul>
        {staticItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    );
  }
  

内容的提问来源于stack exchange，提问作者Abdul Rehman