Блог

Мой код довольно прост, но приводит к следующему предупреждению в консоли:

 index.js:1 Warning: Duplicated key 'undefined' used in Menu by path []  

Это так странно, так как все соответствующие элементы имеют уникальные ключи…?!

 import { useState } from 'react'; import {   Layout,   Menu } from 'antd'; import './navigation.less';  const { Sider } = Layout;  const items = [ {  id: 'abc',  title: "MenuItem 1",  navKey: 1,  disabled: false }, {  id: 'def',  title: "MenuItem 2",  navKey: 2,  disabled: false }, {  id: 'ghj',  title: "MenuItem 3",  navKey: 3,  disabled: true  }, ]  const MenuItem = ({navKey, title, disabled}) =gt; {  return (  lt;Menu.Item key={navKey} disabled={disabled}gt;  {title}   lt;/Menu.Itemgt;  )  }   const menu = items.map((item) =gt; lt;MenuItem key={item.id} {...item} /gt;);   const Navigation = () =gt; {   const [collapsed, setCollapsed] = useState(false);   return (   lt;Sider collapsible collapsed={collapsed} onCollapse={() =gt; setCollapsed(!collapsed)} width={260}gt;   lt;Menu theme="light" mode="inline"gt;   lt;Menu.Divider /gt;  {menu}  lt;Menu.Divider /gt;    lt;/Menugt;  lt;/Sidergt;  );  

}

экспорт навигации по умолчанию;

Ваш menu синтаксис неверен.

Приведенное ниже изменение заставит его работать.

 const menu = items.map((item) =gt; MenuItem(item))