警告:列表中的每个孩子都应该有一个唯一的“key”props

IT技术 javascript reactjs
2022-07-25 02:02:08

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

警告:列表中的每个孩子都应该有一个唯一的“key”props

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

<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个回答

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

在您的情况下,我可以看到您有一个 key props并且收到错误意味着密钥(在您的情况下是 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**

希望有帮助。

此行引发了您遇到的错误

<StyledTableRow key={parametre.id_param}>

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

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