警告：列表中的每个孩子都应该有一个唯一的“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}>

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

并尝试检查 StyledTableRow 的键，您会发现映射 function 中的所有呈现标签都是相同的，因为当您通过 ZA8CFDE6331BD59EB2AC96F8911C4B666 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>
      ))}