Javascript 数组或迭代器中的每个子级都应该有一个唯一的“键”属性。在js中？

我已经提供了不同的密钥。为什么它会给我警告？ 这是我的密码

---

首先，您将键设置在错误的行。片段不会呈现为HTML，但它需要密钥属性

其次，我建议您向嵌套属性添加唯一的id，因为index+I不能保证唯一性。

index+I对于index和I的每个值都不是唯一的

假设fetchData和row的长度都是2，那么index和i都将从0到1计数

key = index + i

index  i     key
0      0     0
0      1     1
1      0     1
1      1     2

这会产生两次1，因此关键点不是唯一的。转换为字符串将有助于：

key = String( index ) + String( i )

index  i     key
0      0     "00"
0      1     "01"
1      0     "10"
1      1     "11"

或者可以乘以row.length生成唯一的整数

key = ( index * row.length ) + i

index  i     key
0      0     0
0      1     1
1      0     2
1      1     3

您的标题或显示文本是否唯一？如果是这样的话，你可以用它们作为关键道具

<TableBody>
          {fetchData.map(([title, row], index) => {
            return (
              <Fragment>
                <TableRow key={title}>
                  <TableCell colSpan="2">{title}</TableCell>
                </TableRow>
                {row.map(({ displaytext, value }, i) => (
                  <TableRow key={displaytext}>
                    <TableCell>{displaytext}</TableCell>
                    <TableCell>{value}</TableCell>
                  </TableRow>
                ))}
              </Fragment>
            );
          })}
</TableBody>

---

索引+i不保证唯一性。您有重复项。当索引为0时，您创建0+0、0+1、0+N，然后索引变为1，您有1+0，以此类推…请建议更好的方法，我添加了一个，但仍然存在相同的错误

key = ( index * row.length ) + i

index  i     key
0      0     0
0      1     1
1      0     2
1      1     3

<TableBody>
          {fetchData.map(([title, row], index) => {
            return (
              <Fragment>
                <TableRow key={title}>
                  <TableCell colSpan="2">{title}</TableCell>
                </TableRow>
                {row.map(({ displaytext, value }, i) => (
                  <TableRow key={displaytext}>
                    <TableCell>{displaytext}</TableCell>
                    <TableCell>{value}</TableCell>
                  </TableRow>
                ))}
              </Fragment>
            );
          })}
</TableBody>