如何解决React.js中Encountered two children with the same key报错问题

• 第一步先确认locations数据源是否存在重复的code字段
  你当前用location.code作为列表项的key，触发这个报错本质就是生成的Items数组里存在多个相同的key值，可以先加日志快速定位重复项：

  console.log('所有location的code值：', locations.map(l => l.code))
  // 统计重复code的逻辑
  const codeCount = locations.reduce((acc, l) => {
    acc[l.code] = (acc[l.code] || 0) + 1
    return acc
  }, {})
  console.log('重复的code项：', Object.entries(codeCount).filter(([k, v]) => v > 1))
  

• 第二步根据排查结果选择替代key方案（全程不需要用到索引作为key）
  1. 如果location对象本身带有id这类全局唯一字段，直接替换code作为key即可：

  key: location.id
  

  2. 如果没有单独的唯一字段，可以将多个能唯一标识单条数据的字段拼接成key，只要保证同级列表内拼接结果不重复即可：

  // 示例：拼接code、description、phoneNumber三个字段，可按需调整字段组合
  key: `${location.code}-${location.description}-${location.phoneNumber}`
  

  3. 如果数据源本身存在完全重复的条目，先给locations数组去重后再做map转换：

  // 示例：根据code去重，多条同code的只保留第一条
  const uniqueLocations = Array.from(new Map(locations.map(l => [l.code, l])).values())
  const Items = uniqueLocations.map((location) => {
    // 保留原有转换逻辑
    return {
      header: location.description,
      key: location.code,
      content: location.phoneNumber,
      image: {
        as: Avatar,
      },
      code: location.code,
    };
  })
  

• 额外排查点
  确认生成Items数组后，后续有没有拼接其他数组、重复添加条目之类的操作，这类操作也可能引入重复的key值。

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