警告：列表中的每个孩子都应该有一个唯一的“key”道具

Question

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

警告：列表中的每个孩子都应该有一个唯一的“key”道具

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

<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

您收到该错误是因为在响应中，如果您正在循环数据，则必须为每个元素添加一个 key prop。密钥必须是唯一的。

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

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

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

hould have a unique “key” prop that pop for me every time and i cant find the error

<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>**strong text**

希望对您有所帮助。

Answer 2

此行引发了您遇到的错误

<StyledTableRow key={parametre.id_param}>

在浏览器中安装 react 开发工具 Chrome extention

并尝试检查 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>
      ))}