数组或迭代器中的每个子级都应该有一个唯一的"key"道具。在 React 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

Answer 3

您的title或display text是唯一的吗？如果是这样的话，你可以把它们作为关键道具。

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