反应“警告：遇到两个孩子用相同的钥匙”

Question

我有一个映射卡的反应应用程序，并且每张卡都有唯一的 id，尽管我在控制台中遇到了一些不是唯一的错误：

警告：遇到两个孩子使用相同的密钥，2294264。钥匙 应该是唯一的，以便组件在整个过程中保持其身份 更新。非唯一键可能会导致子项重复和/或 省略 - 行为不受支持，将来可能会改变 版本。

这是构建我的卡片结构的代码：

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

这是映射卡片的代码：

      <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(v._source))
        )}
      </div>

你能帮帮我吗

Answer 1

这是因为当您在地图中渲染组件列表时，每个组件都应该具有唯一的键属性。由 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, index) => <CreateCards doc ={v._source } key ={index}/>)
        )}
  </div>

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