警告:列表中的每个孩子都应该有一个唯一的"钥匙"道具

Question

我是 React 的新手，我在这里被阻止了。

警告：列表中的每个孩子都应该有一个唯一的"钥匙"道具

每次都会弹出此警告，我找不到错误。

<TableContainer component={Paper}>
<Table  aria-label="customized table">
<TableHead>
<TableRow>
<StyledTableCell>Nom parametre</StyledTableCell>
<StyledTableCell align="right">Type parametre</StyledTableCell>
<StyledTableCell align="right">Valeur</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
{Parametres.map((parametre) => (
<StyledTableRow key={parametre.id_param}>
<StyledTableCell align="right">
{parametre.id_param}
</StyledTableCell>
<StyledTableCell align="right">{parametre.type_param}</StyledTableCell>
<StyledTableCell align="right">{parametre.valeur_param}</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</TableContainer>**strong text**

Answer 1

你得到这个错误是因为在 react 中，如果你循环访问数据，你必须为每个元素添加一个键道具。密钥必须是唯一的。

在您的情况下，我可以看到您有一个密钥道具，并且收到错误意味着密钥(在您的情况下，parametre.id_params(不是唯一的。

您在这里有两个选择。一个是确保 id.params 是唯一的，另一个是使用迭代索引。

后者将更容易实现。应该是这样的。

<TableContainer component={Paper}>
<Table  aria-label="customized table">
<TableHead>
<TableRow>
<StyledTableCell>Nom parametre</StyledTableCell>
<StyledTableCell align="right">Type parametre</StyledTableCell>
<StyledTableCell align="right">Valeur</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
{Parametres.map((parametre, idx) => (
<StyledTableRow key={idx}>
<StyledTableCell align="right">
{parametre.id_param}
</StyledTableCell>
<StyledTableCell align="right">{parametre.type_param}</StyledTableCell>
<StyledTableCell align="right">{parametre.valeur_param}</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</TableContainer>

Answer 2

您遇到的错误由此行引发

<StyledTableRow key={parametre.id_param}>

在浏览器中安装反应开发工具 Chrome 扩展

并尝试检查该 StyledTableRow 的键，您会发现映射函数中所有呈现的标签都是相同的，因为当您映射对象时，每个孩子都应该有他的唯一键。

可以使用的另一种方法是使用项的索引，而不是类似的属性

{Parametres.map((parametre, index) => (
<StyledTableRow key={index}>
<StyledTableCell align="right">
{parametre.id_param}
</StyledTableCell>
<StyledTableCell align="right">{parametre.type_param}</StyledTableCell>
<StyledTableCell align="right">{parametre.valeur_param}</StyledTableCell>
</StyledTableRow>
))}