React列表存在重复项时如何选择合适的key？

当列表里有重复字符串（比如['a', 'b', 'c', 'a']）时，直接用字符串本身当key肯定不行——React要求key是列表元素的唯一标识，重复的key会让React无法正确区分元素，导致渲染异常、状态错乱。下面是几种靠谱的解决方案：

• 给元素附加唯一ID（最优解）
  如果是后端返回的数据，让后端给每条数据加唯一的id字段；如果是前端自己维护的列表，手动给每个项添加唯一标识，比如：

  // 改造后的列表，每个项带唯一id
  const labeledList = [
    { id: 'item_1', val: 'a' },
    { id: 'item_2', val: 'b' },
    { id: 'item_3', val: 'c' },
    { id: 'item_4', val: 'a' }
  ];
  // 渲染时用id当key
  labeledList.map(item => <span key={item.id}>{item.val}</span>)
  

• 用「值+索引」的组合（仅静态列表可用）
  如果列表是完全静态的（不会增删、排序），可以临时用${x}-${index}作为key，但注意：一旦列表有动态变化，索引会跟着改变，React会误判元素的身份，引发不必要的重渲染或状态丢失，所以这只是权宜之计，不是长期方案：

  list.map((x, index) => <span key={`${x}-${index}`}>{x}</span>)
  

• 生成唯一UUID
  如果没有现成的唯一标识，可以用UUID库（比如uuid）或者自己写个简单的唯一值生成函数，确保每个key唯一：

  // 简单生成唯一key的函数
  const getUniqueKey = (val, idx) => `${val}_${Date.now()}_${idx}`;
  list.map((x, index) => <span key={getUniqueKey(x, index)}>{x}</span>)
  

重要提醒：绝对不要单独用索引当key，也不能直接用重复的字符串当key，这两种做法都会在列表动态更新时引发各种渲染问题。

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