React中已设置唯一key仍报列表子项需唯一key属性错误如何解决？

问题根源 #

你在代码中将key属性绑定到了map返回值的子组件<UserListItem />上，但React要求的是**map遍历返回的每一个直接顶层节点必须携带唯一key属性**。你的代码中map每次迭代返回的顶层节点是<div className="col-xl-4 col-m-12 mb-4">，该节点没有key属性，因此触发报错。

修复方案 #

将key属性移动到map返回的顶层div上即可，修改后代码如下：

{this.state.page.content.map((user) => (
  <div 
    key={user.username} 
    className="col-xl-4 col-m-12 mb-4"
  >
    <UserListItem user={user} />
    {console.log(user.username)}
  </div>
))}

额外说明 #

• 纠正一个认知误区：React没有强制要求key必须为字符串类型，只要是唯一的基础类型值都可以正常使用，如果你的user.id是全局唯一的数字，完全可以直接作为key使用，不需要刻意替换为字符串类型字段。
• 不要随意使用遍历索引index作为key，除非你能确定列表不会发生排序、新增、删除等改变元素顺序的操作，否则会引发组件状态错乱的问题。

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