React“警告：遇到两个拥有相同密钥的孩子”

Question

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

\n

\n

警告：遇到两个孩子使用同一把钥匙，2294264。键应该是唯一的，以便组件在更新时保持其身份。非唯一的键可能会导致子项被重复和/或\xe2\x80\x94 被忽略，该行为不受支持，并且可能会在未来版本中更改。

\n

\n

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

\n

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

\n

这是映射卡片的代码：

\n

      <div className="general-card1">\n        {this.state.noPlaceFound ? (\n          <h3 className="noPlaceFound">\n            <i className="fas fa-exclamation-circle fa-sm WarnIcon"></i>\n            \xd9\x84\xd8\xa7 \xd9\x8a\xd9\x88\xd8\xac\xd8\xaf \xd9\x86\xd8\xaa\xd8\xa7\xd8\xa6\xd8\xac\n          </h3>\n        ) : (\n          this.state.WasMap.map((v) => CreateCards(v._source))\n        )}\n      </div>\n

\n

你能帮我么？

\n

Answer 1

当您使用 渲染组件列表时map()，每个组件都应具有唯一的key属性。React 需要区分它们。

\n

渲染一个待办事项列表，例如：

\n

{todos.map((todo) => (<li key={todo.id}>{todo.text}</li>))}\n

\n

你做错的是你在key组件内部添加了 ，它应该在渲染 inside 时的位置map()，如下所示：

\n

<div className="general-card1">\n  {this.state.noPlaceFound ? (\n    <h3 className="noPlaceFound">\n      <i className="fas fa-exclamation-circle fa-sm WarnIcon"></i> \xd9\x84\xd8\xa7 \xd9\x8a\xd9\x88\xd8\xac\xd8\xaf \xd9\x86\xd8\xaa\xd8\xa7\xd8\xa6\xd8\xac\n    </h3>\n  ) : (\n    this.state.WasMap.map((v, index) => (<CreateCards doc={v._source} key={index} />))\n  )}\n</div>\n

\n

请注意key = {index}。id这可行，但如果您有自定义的，最好使用自定义的。您可以使用key = {v._source.newsid}ifv._source.newsid是唯一字段。

\n

有关更多信息，请访问官方文档中的密钥部分。

\n