根据数组动态生成Antd Menu时出现路径[]下重复key 'undefined'警告如何解决

这个警告是两个原因共同导致的：

1. antd 的 Menu 组件仅能识别直接子层级的官方内置菜单组件（Menu.Item、Menu.Divider、Menu.SubMenu 等），你自定义封装了一层 MenuItem 组件包裹 antd 的 Menu.Item，Menu 无法读取到自定义组件内部 Menu.Item 设置的 key，会将所有自定义 MenuItem 组件的 key 识别为 undefined。
2. 你写的两个 Menu.Divider 没有设置唯一 key，也会被识别为 key=undefined，多个 undefined 的 key 就触发了重复警告。

方案1：不自定义封装 Menu.Item，直接渲染（最简单） #

去掉自定义的 MenuItem 组件，直接在 map 时返回 antd 的 Menu.Item，同时给两个 Divider 加上唯一 key：

// 直接处理菜单列表
const menu = items.map((item) => (
  <Menu.Item key={item.navKey} disabled={item.disabled}>
    {item.title}
  </Menu.Item>
));

// Menu 部分修改如下
<Menu theme="light" mode="inline">
  <Menu.Divider key="top-divider" />
  {menu}
  <Menu.Divider key="bottom-divider" />
</Menu>

方案2：用 items 属性配置（antd 推荐写法） #

antd v4 之后更推荐用 items 属性来配置菜单，不需要手动写 JSX 嵌套，也不会出现层级识别问题：

const Navigation = () => {
  const [collapsed, setCollapsed] = useState(false);
  // 组装antd要求的菜单配置
  const menuItems = [
    { type: 'divider', key: 'top-divider' },
    ...items.map(item => ({
      key: item.navKey,
      label: item.title,
      disabled: item.disabled
    })),
    { type: 'divider', key: 'bottom-divider' }
  ];

  return (
    <Sider collapsible collapsed={collapsed} onCollapse={() => setCollapsed(!collapsed)} width={260}>
      <Menu theme="light" mode="inline" items={menuItems} />
    </Sider>
  );
}

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