react 警告 Each child in a list should have a unique “key“ prop.列表中的每个子项都应该有一个唯一的“关键”道具。

出现此警告的原因是 React 要求列表中的每个子项都具有唯一的keyprop。这有助于 React 有效识别哪些项目已更改、已添加或已删除，从而提高性能并防止意外行为。

修复警告
确保列表中渲染的元素PermissionTableHeaderButton.jsx都提供了一个keyprop。 的值key对于列表中的每个项目都应该是唯一的。

例子
如果你有一个像这样呈现的列表：

return (
  <div>
    {permissions.map((permission) => (
      <PermissionButton label={permission.label} />
    ))}
  </div>
);

这将触发警告。要修复此问题，您可以添加一个唯一的key：

return (
  <div>
    {permissions.map((permission) => (
      <PermissionButton key={permission.id} label={permission.label} />
    ))}
  </div>
);

识别和修复步骤
找到 Each child in a list should have a unique “key” prop.指示问题发生的位置。查找map生成多个子项的或类似函数。

添加唯一键：在迭代的对象（如id）中标识一个保证唯一的属性。将此属性作为传递key。

使用索引作为最后的手段：如果不存在唯一属性，则使用数组中项目的索引，但请注意，这并不理想，并且如果列表重新排序可能会导致问题：

<PermissionButton key={index} label={permission.label} />