列表中的每个孩子都应该有一个唯一的"钥匙"道具。所有列表对象都有唯一的 id，但我仍然收到错误

Question

我在data.json文件中有一些对象看起来像这样：

[{
"id": "1",
"srcImg": "https://upload.wikimedia.org/wikipedia/en/5/5a/Wearethechampions.jpg",
"name": "We are the champions"
}]

json中的所有id都是唯一的。这是我的反应代码：

function MusicLi({ item }) { //we take item from map() in MusicList function 
return (
<div>
<li key={item.id}>
<img src={item.srcImg}/>
<p>{item.name}</p>
</li>
</div>
);
}
function MusicList() {
return (
<div>
{data.map((item) => ( //data - imported json
<MusicLi item={item}/> // send item object to MusicLi function
))}
</div>
);
}

Answer 1

试试这个：

function MusicLi({ item }) { //we take item from map() in MusicList function 
return (
<div key={item.id}>
<li>
<img src={item.srcImg}/>
<p>{item.name}</p>
</li>
</div>
);
}

将key移动到顶部元素。

Answer 2

您需要像一样更新代码

function MusicLi({ item }) {
return (
<div key={`sample_${item.id}`}>
<li key={item.id}>
<img src={item.srcImg}/>
<p>{item.name}</p>
</li>
</div>
);
}

您可以定义每个元素的唯一键。