Menu标签点击事件报错 Maximum update depth exceeded？

Question

当我点击antd Menu菜单子项时，移动端浏览器情况下会报错：

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

当浏览器不是移动浏览器时，或者Menu的mode设置不为horizontal时不会有任何问题

import React, { ReactElement, useState } from 'react';
import { Layout, Menu, MenuProps } from 'antd';
import { useNavigate } from 'react-router-dom';
import './index.less';

type Props = {
    current: string;
};
const { Header } = Layout;

const items = [
    { label: '网站首页', key: 'item-1' }, // 菜单项务必填写 key
    { label: 'A', key: 'item-2' },
    { label: 'B', key: 'item-3' },
    { label: 'C', key: 'item-4' },
    { label: 'D', key: 'item-5' },
];

const MyMenu: React.FC<Props> = ({ current }): ReactElement => {
    const navigate = useNavigate();
    const onMenuClick: MenuProps['onClick'] = (e) => {
        switch (e.key) {
            case 'item-1':
                navigate('/index');
                break;
            case 'item-2':
                navigate('/index');
                break;
            case 'item-3':
                navigate('/course');
                break;
            case 'item-4':
                navigate('/product');
                break;
            case 'item-5': {
                navigate('/index');
                break;
            }
            default: {
                break;
            }
        }
    };
    return (
        <Menu
            theme="dark"
            selectedKeys={[current]}
            defaultSelectedKeys={[current]}
            items={items}
            onClick={onMenuClick}
            mode="inline"
        />
        /*移动端浏览器下这里mode设置为horizontal 点击就会报错*/
    );
};

const MyHeader: React.FC<Props> = ({ current }): ReactElement => {
    return (
        <Header>
            <div className="title">
                {/* <div className="logo" /> */}
                <div className="name">头部</div>
            </div>
            <MyMenu current={current} />
        </Header>
    );
};

export default MyHeader;

Answer 1

Maximum update depth exceeded. 是死循环错误。

Answer 2

ok 是ant-design 4.21.6版本的bug 最新版本已修复