报错：key值重复

来源：5-6 【主页开发】走马灯与侧边栏多重菜单

慕无忌7366342

2021-06-16

老师你好，我在使用menu组件时，与您的代码相同。
网页正常打开，但是会报错。
报错内容
说，menu里的每一个key 的值都重复使用。
可是这里每一个字符串都是不同的，怎么会被报错“Duplicated key”呢？
实在想不明白，请老师帮忙解答一下。
这是我的代码：

export const SideMenu: React.FC = () => {
    return (
        <Menu mode="vertical" className={styles['side-menu']}>
            {sideMenuList.map((m, index) => (
                <Menu.SubMenu
                    key={`side-menu-${index}`}
                    title={<span><GifOutlined />{m.title}</span>}
                >
                    {m.subMenu.map((sm, smindex) => (
                        <Menu.SubMenu
                            key={`sub-menu-${smindex}`}
                            title={<span><GifOutlined />{sm.title}</span>}
                        >
                            {sm.subMenu.map((sms, smsindex) => (
                                <Menu.Item
                                    key={`sub-sub-menu-${smsindex}`}
                                >
                                    <span><GifOutlined />{sms}</span>
                                </Menu.Item>
                            ))}
                        </Menu.SubMenu>
                    ))
                    }
                </Menu.SubMenu>
            ))}
        </Menu>
    )
}

同时在网页中，会出现多个menu同时处于选中状态的问题，这之间相关吗？
图片描述
请老师帮我看看，是输入错误吗，还是其他原因。

写回答

3回答

前端老师傅

2022-01-19

export const SlideMenu: React.FC = () => {
return (
<Menu mode='vertical' className={styles['side-menu']}>
{sideMenuList.map((m, index) => (
<Menu.SubMenu
key={`side-menu-${index}`}
title={
<span>
<GifOutlined />
{m.title}
</span>
}
>
{m.subMenu.map((sm, smindex) => (
<Menu.SubMenu
key={`side-menu-${index}-sub-menu-${smindex}`}
title={
<span>
<GifOutlined />
{sm.title}
</span>
}
>
{sm.subMenu.map((sms, smsindex) => (
<Menu.Item
key={`side-menu-${index}-sub-menu-${smindex}-sms-menu-${smsindex}`}
>
<span>
<GifOutlined />
{sms}
</span>
</Menu.Item>
))}
</Menu.SubMenu>
))}
</Menu.SubMenu>
))}
</Menu>
)
}

改成父组件id->子组件id->孙组件id就行了