Javascript 警告：列表中的每个子项都应具有唯一的“键”道具

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

---

您的错误由此行引发

<StyledTableRow key={parametre.id_param}>

在浏览器中安装react-dev工具

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

---

之所以会出现这种错误，是因为在react中，如果在数据中循环，则必须为每个元素添加一个键道具。密钥必须是唯一的

在您的情况下，我可以看到您有一个密钥道具，并且获得一个错误意味着在您的情况下，为parametre.id_params的密钥不是唯一的

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

后者将更容易实施。应该是这样的

应该有一个独特的“钥匙”道具，每次都会弹出，但我找不到错误 名称参数 类型参数 瓦勒尔 {Parameters.MapParameter，idx=> {parametre.id_param} {parametre.type_param} {parametre.valeur_param} } **强文本**

---

希望有帮助

这回答了你的问题吗？你能不能控制台。LogParameter问题解决了吗？如果是这样，你可以接受我的回答，不要使用索引。这是一个坏模式，可能会消除错误，但会产生意想不到的后果——我总是检查任何传入的数据。因此，如果我是您，我将console.log parametre并查看数据是否按预期输入。