如何解决错误 "警告：列表中的每个孩子都应该有一个独特的"key"道具。"

Question

我收到这个警告：列表中的每个子级都应该有一个唯一的"键"；道具在我的反应中。我读过这个文档https://reactjs.org/docs/lists-and-keys.html#keys

我已经准备好在我的代码中这样做了。

<div className="App">
{data.map((category) => {
return (
<>
<Label key={category.key}>{category.key}</Label>
</>
);
}
)}
</div>

我的数据是

const data: any[] = [
{
key: "Main 1",
items: [
{ key: "subitem1", checked: true },
]
},
{
key: "Main 2",
items: [
{ key: "subitem2, checked: true },
]
}
]

我已经在浏览器中安装了React插件。但我不知道如何才能找出哪个元素缺少"关键"道具？

Answer 1

回答何时需要保留碎片：

键必须位于.map返回的元素上，而不是嵌套的元素。React Fragment也是一个元素，因此键应该在Fragment上。缩写<>不支持密钥，因此需要使用更长的语法：

<React.Fragment key={key}>
...
</React.Fragment>

Answer 2

键必须是映射中返回的根元素的属性。

尝试编写以下代码块：

<div className="App">
{data.map((category) => {
return (
<>
<Label key={category.key}>{category.key}</Label>
</>
);
}
)}
</div>

像这样代替

<div className="App">
{data.map((category) => {
return (
<Label key={category.key}>{category.key}</Label>
);
}
)}
</div>

你也可以写：

<div className="App">
{data.map((category) => {
return (
<div key={category.key}>
<Label>{category.key}</Label>
</div>
);
}
)}
</div>