为什么我收到此错误：“每个孩子都应该有一个唯一的关键道具”

Question

从 'react' 导入 React, { useState }

导出默认函数Folder({ datas }) { const [toggleFolder, setToggleFolder] = useState(false);

返回（ <>

  <div
    onClick={() => setToggleFolder(prev => !prev)}
    className='cursor-pointer'>📁 {datas.folder}</div>
 
 
  <div
    key={datas.id}
    style={{ display: toggleFolder ? "block" : "none" }}
    className='pl-[20px]'
  >
    {
      datas.children && datas.children.length > 0 ?
        datas.children.map((key, index) => {
          return <Folder datas={key} />
        })
        : <p className='opacity-70'>empty</p>
    }
  </div>
</>

） }

Answer 1

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
        key={datas.id}
        style={{ display: toggleFolder ? "block" : "none" }}
        className='pl-[20px]'
      >
        {datas.children && datas.children.length > 0 ? (
          datas.children.map(child => (
            <Folder key={child.id} datas={child} />
          ))
        ) : (
          <p className='opacity-70'>empty</p>
        )}
      </div>
    </>
  );
}

即使它仍然存在，也尝试添加索引

(
 datas.children.map(child,index) => (
    <Folder key={index} datas={child} />
))