React已设置唯一key仍报列表子项需唯一key警告问题咨询

问题根因 #

React要求列表渲染（即map遍历生成节点）时，key属性必须绑定在map方法返回的每一个直接顶层节点上。
你的代码中unit.children.map(childId => render(childId))返回的直接顶层节点是render函数返回的简写Fragment（<></>），你把key加在了Fragment内部的div上属于无效绑定，React检测不到map返回节点的key属性，就会抛出对应警告。注释掉map代码后没有列表渲染逻辑，自然不会触发key校验，警告消失。
此外，简写的Fragment语法<></>不支持传递任何属性，包括key，无法直接绑定key。

修复方案 #

将render函数返回的简写Fragment替换为完整的React.Fragment写法，把key绑定在这个顶层Fragment上即可：

const render = (id) => {
  const unit = units[id];
  return (
    <React.Fragment key={id}>
      <div className={id}>{unit.title}</div>
      {unit.children.map(childId => render(childId))} 
    </React.Fragment>
  );
}

你的id已经确认唯一，修改后key绑定位置正确，警告就会消失。

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