我是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**
2条答案
按热度按时间11dmarpk1#
你得到这个错误是因为在react中,如果你循环遍历数据,你必须给每个元素添加一个键属性,这个键必须是唯一的。
在您的例子中,我可以看到您有一个键属性,得到一个错误意味着这个键(在您的例子中是parametre.id)不是唯一的。
这里有两个选择,一个是确保id.params是唯一的,另一个是使用迭代索引。
后者会比较容易实现,应该是这样的。
bbuxkriu2#
您遇到的错误是由此行引发的
在浏览器Chrome extention中安装react dev工具
并尝试检查该StyledTableRow的键,您将发现它对于来自Map函数的所有呈现标记都是相同的,因为当您通过对象进行Map时,每个子对象都应该具有其唯一键。
另一种可供选择的方法是使用项的索引,而不是类似的属性