React Form组件出现列表子元素缺少唯一key prop警告该怎么解决？

• 你在users.map遍历渲染用户列表时，没有给每一项的根元素加唯一key属性，这是触发报错的直接原因
• 你之前尝试赋值key时报错，大概率是因为你用了React短语法Fragment<></>，该语法不支持传递任何属性（包括key），所以即使写了key也会识别失败

方案1：替换短Fragment为完整语法，绑定接口返回的id为key #

reqres的新增用户接口会自动返回唯一id字段，直接绑定即可：

{users.map(user => {   
  return(
    <React.Fragment key={user.id}>
      <p> User Name :{user.user}</p>
      <p>User Email :{user.email}</p>
    </React.Fragment>
  )
})}

方案2：用div包裹列表项，给div加key #

如果不需要Fragment减少多余DOM，直接用div作为根节点绑定key即可：

{users.map(user => {   
  return(
    <div key={user.id}>
      <p> User Name :{user.user}</p>
      <p>User Email :{user.email}</p>
    </div>
  )
})}

临时应急方案 #

如果出现拿不到唯一id的特殊情况，可暂时用数组下标作为key（仅当列表是静态、不会做增删排序操作时适用，否则可能出现渲染异常）：

{users.map((user, index) => {   
  return(
    <div key={index}>
      <p> User Name :{user.user}</p>
      <p>User Email :{user.email}</p>
    </div>
  )
})}

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