使用Menu组件的Submenu，绑定了key，控制台报错Duplicated key 'undefined' used in Menu by path []

[ztever]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://xx.com

Steps to reproduce

const RenderMenuItem: React.FC<{ list: DirectoryItem[] }> = ({ list }) => (
    <>
      {list.map((node: DirectoryItem) => (
        <SubMenu
          key={node.id}
          icon={
            <PlusSquareOutlined
              onClick={(evt: React.MouseEvent) => {
                evt.stopPropagation();
                clickPlus(node);
              }}
            />
          }
          title={node.name}
        >
        </SubMenu>
      ))}
    </>
  );

  return (
    <Menu
      defaultOpenKeys={defaultOpenKeys}
      defaultSelectedKeys={defaultSelectKeys}
      className={styles.menuList}
      mode="inline"
      style={{ borderRight: 0 }}
    >
      <RenderMenuItem list={menuData} />
    </Menu>
  );
};

What is expected?

submenue的key能成功帮定

What is actually happening?

node.id有值，但是submemu的key是undefined

Environment	Info
antd	4.17.0
React	17.0
System	macOS
Browser	chrome 97.0.4692.71

[afc163]

Duplicate of #4853

[afc163]

Try eventKey.

[afc163]

const RenderMenuItem: React.FC<{ list: DirectoryItem[] }> = ({ list }) => (
    <>
      {list.map((node: DirectoryItem) => (
        <SubMenu
          key={node.id}
+         eventKey={node.id}
          icon={
            <PlusSquareOutlined
              onClick={(evt: React.MouseEvent) => {
                evt.stopPropagation();
                clickPlus(node);
              }}
            />
          }
          title={node.name}
        >
        </SubMenu>
      ))}
    </>
  );

  return (
    <Menu
      defaultOpenKeys={defaultOpenKeys}
      defaultSelectedKeys={defaultSelectKeys}
      className={styles.menuList}
      mode="inline"
      style={{ borderRight: 0 }}
    >
      <RenderMenuItem list={menuData} />
    </Menu>
  );
};

[ztever]

const RenderMenuItem: React.FC<{ list: DirectoryItem[] }> = ({ list }) => (
    <>
      {list.map((node: DirectoryItem) => (
        <SubMenu
          key={node.id}
+         eventKey={node.id}
          icon={
            <PlusSquareOutlined
              onClick={(evt: React.MouseEvent) => {
                evt.stopPropagation();
                clickPlus(node);
              }}
            />
          }
          title={node.name}
        >
        </SubMenu>
      ))}
    </>
  );

  return (
    <Menu
      defaultOpenKeys={defaultOpenKeys}
      defaultSelectedKeys={defaultSelectKeys}
      className={styles.menuList}
      mode="inline"
      style={{ borderRight: 0 }}
    >
      <RenderMenuItem list={menuData} />
    </Menu>
  );
};

加上eventkey后，控制台会报Each child in a list should have a unique "key" prop.的错误

[ztever]

不用函数组件，就不会报错了

const MenuList = ({
  menuData,
  onClickPlus,
  onClickMenueItem,
  defaultOpenKeys,
  defaultSelectKeys,
}: {
  menuData: DirectoryItem[];
  defaultOpenKeys?: string[];
  defaultSelectKeys?: string[];
  onClickPlus: (value: DirectoryItem) => void;
  onClickMenueItem: (value: DirectoryItem, value2: DirectoryItem) => void;
}) => {
  const clickPlus = (item: DirectoryItem) => {
    onClickPlus(item);
  };
  const renderMenuItem = menuData.map((node: DirectoryItem) => (
    <SubMenu
      key={node.id}
      icon={
        <PlusSquareOutlined
          onClick={(e: React.MouseEvent) => {
            e.stopPropagation();
            clickPlus(node);
          }}
        />
      }
      title={node.name}
    >
      {node.children &&
        node.children.map((node2: DirectoryItem) => {
          return (
            <Menu.Item onClick={() => onClickMenueItem(node2, node)} key={node2.id}>
             //
            </Menu.Item>
          );
        })}
    </SubMenu>
  ));

  return (
    <Menu
      defaultOpenKeys={defaultOpenKeys}
      defaultSelectedKeys={defaultSelectKeys}
      className={styles.menuList}
      mode="inline"
      style={{ borderRight: 0 }}
    >
      {renderMenuItem}
    </Menu>
  );
};
export default MenuList;

[RyanWhipple]

Try eventKey.

Thanks, this worked for me! eventKey isn't listed as an API in the docs, either in SubMenu or Menu. Should this be updated?

https://ant.design/components/menu/

[zee-algo]

Try eventKey.

Thanks a lot. It worked!

[phuctran2901]

eventKey current version is not provided anymore, is there any workaround anymore?

[khanisak]

@phuctran2901 did you find a workaround? on v5.0.7 eventKey props exist on Menu.Item but does
not exist on Menu.SubItem