ReactJS列表项包裹Card组件仅单场景触发唯一key报错原因求解

报错原因 #

React的key是专门用于标识数组中同层级节点唯一性的属性，必须挂载到数组遍历返回的直接根节点上：

• 报错场景中，map返回的直接根节点是<Card>组件，你把key属性绑定到了它的子节点<Children>上，React无法识别到遍历生成的每个根节点的唯一标识，因此触发唯一键报错。
• 正常场景中，map返回的直接根节点是绑定了key的<Children>组件，<Card>是<Children>内部的节点，不需要承担数组项的唯一标识作用，因此不会触发报错。

两种场景渲染的HTML结构一致是因为key是React的内部专用属性，不会渲染到最终的DOM上，和实际输出的HTML结构无关。

判断规则 #

记住核心规则即可避免同类错误：使用map遍历生成JSX数组时，你在map回调中return的第一个/最外层节点（不管是原生DOM标签还是自定义组件），必须显式绑定唯一key属性。

对应官方文档位置 #

该知识点属于React核心基础，你可以在React官方文档的「列表 & Key」章节查阅完整说明，直接在React官网文档搜索关键词即可定位。

内容的提问来源于stack exchange，提问作者elG