如何为DrawerItem添加唯一key？代码运行仍报缺失key错误

React要求列表中的每个元素都要有唯一的key属性，用来帮助框架识别组件身份，避免渲染时的性能问题和警告。针对你的代码，有两种简单的解决方法：

方法1：直接为每个列表项添加key #

你可以直接给包裹DrawerItem的外层<div>或者DrawerItem本身添加key属性，确保每个key值唯一即可：

const drawer = (
  <div className="flex flex-col">
    <div className="drawer-container">
      <div className="menu-container mt-8">
        <List>
          <div key="home">
            <DrawerItem
              name="Home"
              link="/home"
              icon="home"
              matchLinks={['home']}
            />
          </div>
          <div key="profile">
            <DrawerItem name="Profile" icon="people" link="/profile" matchLinks={['profile']} />
          </div>
          <div key="page-2">
            <DrawerItem
              name="page 2"
              icon="page 2"
              link="/page-2"
            />
          </div>
          <div key="settings" className="lg:mt-96 2xl:mt-4px">
            <DrawerItem
              name="Settings"
              icon="settings"
              link="/setting"
            />
          </div>
        </List>
      </div>
    </div>
  </div>
);

这里用每个菜单项的标识（如home、profile）作为key，确保不会重复即可。

方法2：抽成数据数组后map渲染（推荐） #

把菜单数据抽成数组，通过map方法渲染列表，这种方式更易维护，也符合React的最佳实践：

// 定义菜单数据数组
const menuItems = [
  {
    name: "Home",
    link: "/home",
    icon: "home",
    matchLinks: ['home'],
    className: ""
  },
  {
    name: "Profile",
    link: "/profile",
    icon: "people",
    matchLinks: ['profile'],
    className: ""
  },
  {
    name: "page 2",
    link: "/page-2",
    icon: "page 2",
    className: ""
  },
  {
    name: "Settings",
    link: "/setting",
    icon: "settings",
    className: "lg:mt-96 2xl:mt-4px"
  }
];

const drawer = (
  <div className="flex flex-col">
    <div className="drawer-container">
      <div className="menu-container mt-8">
        <List>
          {menuItems.map(item => (
            <div key={item.link} className={item.className}>
              <DrawerItem
                name={item.name}
                link={item.link}
                icon={item.icon}
                matchLinks={item.matchLinks}
              />
            </div>
          ))}
        </List>
      </div>
    </div>
  </div>
);

注意事项： #

• key值必须唯一，尽量避免使用数组索引（除非列表不会发生排序、增删操作）
• 优先使用每个菜单项的唯一标识作为key，比如示例中的link属性，确保不会重复

内容的提问来源于stack exchange，提问作者Jennifer De Goede