为何出现"Each child should have a unique key prop"错误？附代码

你犯的核心问题是把key属性加错了位置：React要求在数组遍历（map）生成的每个子组件上添加唯一key，而不是包裹这些子组件的外层<div>上。

你的代码里把key={datas.id}加在了外层的<div>，但真正需要加key的是datas.children.map返回的每个<Folder>组件。

修改后的代码 #

import React, { useState } from 'react'

export default function Folder({ datas }) {
  const [toggleFolder, setToggleFolder] = useState(false);

  return (
    <>
      <div
        onClick={() => setToggleFolder(prev => !prev)}
        className='cursor-pointer'>📁 {datas.folder}</div>
     
      <div
        style={{ display: toggleFolder ? "block" : "none" }}
        className='pl-[20px]'
      >
        {
          datas.children && datas.children.length > 0 ?
            datas.children.map((item) => {
              // 给每个map生成的Folder组件添加唯一key，优先用子项自身的id
              return <Folder key={item.id} datas={item} />
            })
            : <p className='opacity-70'>empty</p>
        }
      </div>
    </>
  )
}

关键说明 #

1. key的作用：React通过key识别列表元素的唯一性，避免重渲染时出现DOM更新错误，提升渲染性能。
2. key的位置：必须直接添加在map返回的根元素上，不能加在外层容器。
3. key的选择：优先使用数据自身的唯一标识（比如item.id），如果没有唯一id，临时可以用index作为key，但不推荐在列表有排序、增删操作的场景下使用index——因为index会随列表变化而改变，失去key的作用。

另外建议把map的参数(key, index)改成(item)，避免和key属性命名混淆，提升代码可读性。

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