React键-在列表中呈现两个重复项-如何避免相同项出现相同的键警告，而不使用索引作为键？

Question

我有一个画廊的项目。记忆卡游戏中的2个项目始终相同（记住2个匹配的图像）。现在，如果我映射通过，我会得到一个错误，即每个孩子都应该有唯一的密钥，因为我将id作为密钥。但是，我渲染的项目中有2个完全相同。我看到的唯一方法是将索引作为键，这是不好的。

我怎么能做到这一点而不传递索引。

state = {
 cards: [
   {id: 132, src="example.com/hello"},
   {id: 142, src="example.com/bye"},
   {id: 132, src="example.com/hello"},
   {id: 142, src="example.com/bye"}
 ]
}
this.state.cards.map((card)=> {
  return <div key={card.id}><img src={card.src} /> <div/>
}

Answer 1

@苏珊特基本上已经回答了，但代码如下

this.state.cards.map((card,index)=> {
  return <div key={index}><img src={card.src} /> <div/>
}