React已添加key prop仍报数组子元素key不唯一错误该如何解决？

报错根因与解决方案 #

警告：数组或迭代器中的每个子元素都应当拥有唯一的"key" prop。请检查使用了该渲染逻辑的顶层render调用。

你报错的核心原因是key绑定的位置错误，绑定在ul或者外层div都不会生效，key必须绑定在map方法返回的每一个直接子元素上：

• map遍历生成的每一个JSX节点，都需要给它的最外层根标签加唯一key，不需要给内部的ul、li加，也不需要给包裹整个列表的父容器加
• 如果存在嵌套map逻辑，内层map返回的每一个子元素也需要单独加唯一key，很多人漏加内层map的key也会触发该警告
• 不推荐用数组索引idx作为key，如果你渲染的列表会有增删、排序操作，用索引作为key反而会引发渲染异常，优先用业务唯一标识比如id作为key值

正确写法示例 #

你给出的代码片段需要修改为以下形式：

var View = deviceTypes.map((deviceType,idx) => {
  // 给map返回的最外层元素加key，优先用业务唯一id，没有的话可临时用idx
  return <div key={deviceType.id || idx}>
    {/* 这里放你内部的ul、li等渲染逻辑 */}
    <ul>
      ...
    </ul>
  </div>
})

快速排查方法 #

如果修改后还存在警告，可以按以下步骤定位：

• 全局搜索项目中所有用到数组map返回JSX的代码位置，逐一检查返回项有没有加key
• 安装React DevTools浏览器插件，打开组件面板，标有黄色警告的组件就是存在key问题的组件，直接查看该组件的列表渲染逻辑即可

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