文章/答案/技术大牛

发布

社区首页 >问答首页 >警告:列表中的每个孩子都应该有一个唯一的“键”道具。

问警告:列表中的每个孩子都应该有一个唯一的“键”道具。
EN

Stack Overflow用户

提问于 2020-05-20 01:40:08

回答 2查看 2.9K关注 0票数 1

我是新来的，我在这里被堵住了。

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

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

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

reactjs

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-05-20 03:02:44

您会得到这个错误，因为在react中，如果您正在循环数据，您必须向每个元素添加一个键支柱。钥匙必须是独一无二的。

在您的例子中，我可以看到您有一个密钥支柱，得到一个错误意味着键(在您的例子中是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**

希望这能有所帮助。

票数 2

Stack Overflow用户

发布于 2020-05-20 01:53:00

您拥有的错误由以下行引发

<StyledTableRow key={parametre.id_param}>

在浏览器铬延伸中安装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>
      ))}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61903701

复制

相似问题

问警告:列表中的每个孩子都应该有一个唯一的“键”道具。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问警告:列表中的每个孩子都应该有一个唯一的“键”道具。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问警告:列表中的每个孩子都应该有一个唯一的“键”道具。
EN