React使用map渲染列表报子元素缺少唯一key prop错误如何解决

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

报错根因 #

调用map遍历生成JSX列表节点时，没有给循环产出的每一个最外层子元素设置全局唯一的key属性，React的虚拟DOM diff机制无法准确识别节点身份，就会触发这个警告。

核心注意点 #

• key属性必须加在map循环返回的最外层DOM/组件节点上，不要加在节点内部的子元素上
• key只需要在当前同级列表中唯一即可，不需要全局唯一
• 不要用数组下标index作为key：如果列表存在增删、排序、过滤操作，下标会跟着元素位置变化，导致React识别节点错误，出现输入框内容错位、组件状态混乱等问题
• 不要用Math.random()这类随机值当key：每次渲染随机值都会变化，会导致React反复销毁重建节点，严重损耗性能，还会丢失组件内部状态

修复示例 #

错误写法（无key） #

const userList = [{id: 1, name: '张三'}, {id:2, name: '李四'}]
function UserList() {
  return (
    <div className="list">
      {/* 遍历生成的节点没加key，直接触发警告 */}
      {userList.map(user => (
        <div className="list-item">{user.name}</div>
      ))}
    </div>
  )
}

正确写法 #

优先用列表项自带的唯一业务字段作为key，比如数据id、唯一编号这类不会随位置变化的固定值：

const userList = [{id: 1, name: '张三'}, {id:2, name: '李四'}]
function UserList() {
  return (
    <div className="list">
      {userList.map(user => (
        // 给循环返回的最外层节点加唯一key，用数据本身的固定唯一id
        <div key={user.id} className="list-item">{user.name}</div>
      ))}
    </div>
  )
}

如果是完全静态、不存在任何顺序调整、增删操作的固定列表，才可以临时使用数组下标作为key兜底。

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