javascript - 数组或迭代器中的每个 child 都应该有一个唯一的 "key"属性。在 react js？

Question

我已经提供了不同的 key 。为什么它给我警告？
这是我的代码
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不保证唯一性。