报错：key值重复

Question

老师你好，我在使用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同时处于选中状态的问题，这之间相关吗？

请老师帮我看看，是输入错误吗，还是其他原因。

Answer 1

前端老师傅 2022-01-19 14:41:59

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就行了

Answer 2

莜紫兮 2021-11-16 10:58:32

参考一下这个案例 https://blog.csdn.net/qq_42876444/article/details/119698940
我的代码也是报key值重复错误然后子组件中的key带上父组件的key就可以了~

Answer 3

阿莱克斯刘 2021-06-22 05:57:27

hello 同学你好，你的代码与我的代码几乎是一样的（除了缩进不一样以外）。然后仔细看过你的代码我没有发现问题，甚至把你的代码全部复制到我的代码中，也没有任何报错。我也觉得很奇怪，要不你试一下运行课程代码库的代码，看看是不是也有同样的问题？（我测试过课程代码，一切都是正常的）

• 提问者 慕无忌7366342 #1

  好的我试一下

• 阿莱克斯刘 回复 提问者 慕无忌7366342 #2

  好像我知道为什么了，应该是antd的新版本的问题。你可以试试降级使用与课程一致的版本，错误应该就消失了。