React出现相同key警告：已设置卡片唯一id仍报错如何解决？

错误信息明确指向存在重复的key值，可按照以下步骤排查修复： #

排查步骤 #

• 第一步：验证数据源是否存在真实重复id
  你认为newsid唯一不代表实际返回的数据源没有重复，可在渲染前添加代码检测重复项：

// 渲染列表前执行
const allNewsIds = this.state.WasMap.map(item => item._source.newsid)
const duplicateIds = [...new Set(allNewsIds.filter((id, index) => allNewsIds.indexOf(id) !== index))]
console.log('重复的id列表：', duplicateIds)

如果控制台输出了包含2294264在内的重复id，说明数据源本身有重复值，是报错的核心原因。

• 第二步：验证key挂载位置是否符合React规范
  React要求map遍历返回的每一个顶层节点必须直接绑定key属性，你当前将key写在CreateCards函数内部的SimpleCard上，若封装逻辑存在嵌套可能导致React无法正确识别key。

修复方案 #

方案1：数据源存在重复id的情况 #

优先推动后端修复数据源重复问题，如果后端暂时无法调整，可使用id+数组索引拼接的方式生成唯一key（不建议单独用索引当key，仅在列表无增删排序需求时可临时使用）：

// 修改渲染逻辑
this.state.WasMap.map((v, index) => (
  <CreateCards 
    key={`${v._source.newsid}-${index}`} 
    doc={v._source}
  />
))

// 调整CreateCards函数，移除内部key定义
function CreateCards({doc}) {
  return (
    <SimpleCard
      theCardId={doc.newsid}
      categorietitle={doc.categorietitle}
      newstitle={doc.newstitle}
      date={format(new Date(doc.date), "dd/MM/yyyy")}
      thenews={doc.thenews}
      newsurl={doc.newsurl}
    />
  );
}

方案2：数据源无重复的情况 #

直接将key绑定到map返回的顶层节点上，符合React的规范要求，修复后的代码如下：

// 列表渲染代码
<div className="general-card1">
  {this.state.noPlaceFound ? (
    <h3 className="noPlaceFound">
      <i className="fas fa-exclamation-circle fa-sm WarnIcon"></i>
      لا يوجد نتائج
    </h3>
  ) : (
    this.state.WasMap.map((v) => (
      <CreateCards 
        key={v._source.newsid} 
        doc={v._source} 
      />
    ))
  )}
</div>

// 卡片构建代码
function CreateCards({doc}) {
  return (
    <SimpleCard
      theCardId={doc.newsid}
      categorietitle={doc.categorietitle}
      newstitle={doc.newstitle}
      date={format(new Date(doc.date), "dd/MM/yyyy")}
      thenews={doc.thenews}
      newsurl={doc.newsurl}
    />
  );
}

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