React报Each child in a list should have a unique "key" prop错误如何解决

问题原因 #

该报错是React列表渲染的强制规则：使用map遍历生成DOM元素时，必须给每个返回的根元素绑定唯一的key属性，用于React做虚拟DOM的差异对比，提升渲染性能、避免渲染异常。

修复方案 #

方案1：快速适配现有代码

无需改动你现有的tabContArr结构，仅修改map遍历逻辑即可，给每个返回的元素套上带key的React.Fragment，固定列表场景下直接用遍历索引作为key即可：

{tabContArr.map((section, index)=>{
  // 注意<></>是React.Fragment的语法糖，不能绑定属性，加key必须写完整标签
  return <React.Fragment key={index}>{section.tabTitle}</React.Fragment>
})}

方案2：优化冗余结构（更推荐）

你当前的数组重复写了4次逻辑几乎一致的span标签，冗余度很高，建议把数组改成纯数据结构，渲染时再生成DOM，后续维护扩展更方便：

1. 改造数组结构

// 可根据业务需求扩展字段，比如加tab对应内容、唯一标识等
const tabContArr = [
  { id: 'tab_0', title: '0' },
  { id: 'tab_1', title: '1' },
  { id: 'tab_2', title: '2' },
  { id: 'tab_3', title: '3' },
]

2. 重写渲染逻辑

{tabContArr.map((item, index)=>{
  return (
    <span
      // 若tab列表后续会有增删、排序操作，必须用固定唯一id当key，无动态变更用索引也可
      key={item.id}
      className={activeIndex === index ? "is-active" : ""}
      onClick={() => tabClickHandler(index)}
    >
      {item.title}
    </span>
  )
})}

补充说明 #

key只需要保证同层级列表元素内唯一即可，不需要全局唯一。

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