reactjs 警告:列表中的每个子元素都应该有唯一的“键”属性

envsm3lx  于 2023-02-12  发布在  React
关注(0)|答案(2)|浏览(147)

我是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**
11dmarpk

11dmarpk1#

你得到这个错误是因为在react中,如果你循环遍历数据,你必须给每个元素添加一个键属性,这个键必须是唯一的。
在您的例子中,我可以看到您有一个键属性,得到一个错误意味着这个键(在您的例子中是parametre.id)不是唯一的。
这里有两个选择,一个是确保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>
bbuxkriu

bbuxkriu2#

您遇到的错误是由此行引发的

<StyledTableRow key={parametre.id_param}>

在浏览器Chrome extention中安装react dev工具
并尝试检查该StyledTableRow的键,您将发现它对于来自Map函数的所有呈现标记都是相同的,因为当您通过对象进行Map时,每个子对象都应该具有其唯一键。
另一种可供选择的方法是使用项的索引,而不是类似的属性

{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>
      ))}

相关问题