React：列表中的兄弟姐妹必须具有唯一键。这些列表兄弟姐妹的孩子是否也需要它们？答案

【问题标题】：React: Siblings in a list must have unique key. Do the children of these list siblings need them too?React：列表中的兄弟姐妹必须具有唯一键。这些列表兄弟姐妹的孩子是否也需要它们？
【发布时间】：2021-01-12 16:47:22
【问题描述】：

我正在通过在我的状态（通过 useState() React 钩子创建）上使用 .map() 来生成一系列 div。

每个 div 都有一个独特的 React key。但是，我仍然收到以下错误：

Warning: Each child in a list should have a unique "key" prop.

<div> 兄弟姐妹中的每一个都有 30-50 个孩子。这些孩子是否也需要一个独特的 React key？

React 文档 (https://reactjs.org/docs/lists-and-keys.html) 在这一点上显得模棱两可。

表示：

“一个好的经验法则是 map() 调用中的元素需要键。” （所有元素？还是只是父兄弟姐妹？）
键只能在同级中唯一。（我描述的场景遵循这个规则）

但是，它的所有示例都没有提供包含许多嵌套元素的列表兄弟的清晰性。

提前感谢您的帮助。

【问题讨论】：

这可能对你有帮助stackoverflow.com/questions/28329382/…

标签： reactjs key

【解决方案1】：

每次当您像下面这样在循环中渲染任何一系列节点（React.Fragment、div、span 等）时，您必须这样做：

const list = [...list of your raw items]; // Array<{id: number, name: string}>

return (
  <main>
    {list.map((item, index) => (
      <section key={item.id}>
        <div><span>{item.name}</span></div>
      </div>
    ))}
  </div>
)

为地图回调中的顶级节点元素定义key（在我的示例中为section）；
key应该是当前循环中的uniq参数，可以是index，但不推荐（如果动态修改list，为了更好的性能）。通常是每个实体的ID；

ps。您不必为任何孩子传递key（在我的示例中-div 和span），但它无害（只是没用）。

【讨论】：