数组或迭代器中的每个孩子都应该有一个唯一的“key” prop。在反应js？

Question

我已经提供了不同的密钥。为什么它给我警告？这是我的代码 https://codesandbox.io/s/0xvqw6159n

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

Answer 1

首先，您设置了key错误的行。Fragment不呈现为 HTML，但它需要key道具。

<Fragment key={index}>
   <TableRow>

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

Answer 2

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