reactjs - 反应键 - 在列表中呈现 2 个重复项 - 如何在不使用索引作为键的情况下避免与相同项目相同的键警告？

Question

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

我如何在不传入 index.html 的情况下做到这一点？

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

@sushant 基本上已经回答了，但这里是代码

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