reactjs - Advertencia: [antd: Menu] `children` será eliminado en la próxima versión principal. Por favor, use `items` en su lugar

Tengo un proyecto que contiene varias interfaces, y entre estas interfaces hay una interfaz que contiene una barra lateral, y uso un "menú" para la barra lateral.

Pero tengo este problema:

Warning: [antd: Menu] `children` will be removed in next major version. Please use `items` instead. 

/* eslint-disable react-hooks/exhaustive-deps */
import { Layout, Menu } from 'antd';
import '../../../styles/sidebar/index.scss';
import { FunctionComponent, useContext, useEffect, useState } from 'react';
import _ from 'lodash';
import { FormattedMessage } from 'react-intl';
import { AuthContext, IAuthContext } from '../../../contexts/auth-context';
import { useCurrentPath } from '../../../utils/use-current-path';

const { SubMenu } = Menu;
const { Sider } = Layout;

export interface Children {
    path: string;
    title: string;
    link: string;
    icon: JSX.Element;
}
export interface MenuItems {
    title: string;
    link: string;
    children?: Children[];
    permissions?: string[];
}
export interface SideBarProps {
    header?: any;
    footer?: JSX.Element | string;
    MenuItems: MenuItems[];
    collapsed?: boolean;
    onChange: (link: string) => void;
}

const SideBar: FunctionComponent<SideBarProps> = (props) => {
    const authContext = useContext<IAuthContext>(AuthContext);
    const currentPath = useCurrentPath();
    const [activeIndex, setActiveIndex] = useState<number>();
    const [items, setItems] = useState<MenuItems[]>([]);
    useEffect(() => {
        let menuItems = props.MenuItems.filter((c, i) => {
            if (currentPath?.includes(c.link)) {
                setActiveIndex(i);
            }
            return (
                !c.permissions ||
                c.permissions?.some((per) => {
                    return authContext.actions.hasMainPermission(per);
                })
            );
        });
        setItems(menuItems);
    }, []);
    return (
        <div>
            <Sider
                className='site-layout-background'
                collapsed={props.collapsed}
            >
                <Menu mode='inline' selectedKeys={[String(activeIndex)]}>
                    {items.map((item, index) => {
                        if (item.children && !_.isEmpty(item.children)) {
                            return (
                                <SubMenu
                                    title={
                                        <FormattedMessage
                                            id={item.title}
                                        />
                                    }
                                >
                                    {item.children?.map((child, index) => (
                                        <Menu.Item
                                            key={index}
                                            onClick={() => {
                                                setActiveIndex(index);
                                                props.onChange(item.link);
                                            }}
                                        >
                                            {
                                                <FormattedMessage
                                                    id={child.title}
                                                />
                                            }
                                        </Menu.Item>
                                    ))}
                                </SubMenu>
                            );
                        }
                        return (
                            <Menu.Item
                                key={index}
                                onClick={() => {
                                    setActiveIndex(index);
                                    props.onChange(item.link);
                                }}
                            >
                                {<FormattedMessage id={item.title} />}
                            </Menu.Item>
                        );
                    })}
                </Menu>
            </Sider>
        </div>
    );
};
export default SideBar;

Respuesta #1

La advertencia aparece debido a la actualización en el uso de Menu. En lugar de pasar elementos directamente dentro de <Menu>, puedes pasarlos con una prop items. En tu caso:

<Menu mode='inline' selectedKeys={[String(activeIndex)]} items={listOfItems}/>

Mueve el mapeo de items afuera y pásalo a Menu.

Código completo:

/* eslint-disable react-hooks/exhaustive-deps */
import { Layout, Menu } from 'antd';
import '../../../styles/sidebar/index.scss';
import { FunctionComponent, useContext, useEffect, useState } from 'react';
import _ from 'lodash';
import { FormattedMessage } from 'react-intl';
import { AuthContext, IAuthContext } from '../../../contexts/auth-context';
import { useCurrentPath } from '../../../utils/use-current-path';

const { SubMenu } = Menu;
const { Sider } = Layout;

export interface Children {
  path: string;
  title: string;
  link: string;
  icon: JSX.Element;
}

export interface MenuItems {
  title: string;
  link: string;
  children?: Children[];
  permissions?: string[];
}

export interface SideBarProps {
  header?: any;
  footer?: JSX.Element | string;
  MenuItems: MenuItems[];
  collapsed?: boolean;
  onChange: (link: string) => void;
}

const SideBar: FunctionComponent<SideBarProps> = (props) => {
  const authContext = useContext<IAuthContext>(AuthContext);
  const currentPath = useCurrentPath();
  const [activeIndex, setActiveIndex] = useState<number>();
  const [items, setItems] = useState<MenuItems[]>([]);

  useEffect(() => {
    let menuItems = props.MenuItems.filter((c, i) => {
      if (currentPath?.includes(c.link)) {
        setActiveIndex(i);
      }
      return (
        !c.permissions ||
        c.permissions?.some((per) => {
          return authContext.actions.hasMainPermission(per);
        })
      );
    });
    setItems(menuItems);
  }, []);

  const listOfItems = items.map((item, index) => {
    if (item.children && !_.isEmpty(item.children)) {
      return (
        <SubMenu
          key={index}
          title={<FormattedMessage id={item.title} />}
        >
          {item.children?.map((child, index) => (
            <Menu.Item
              key={index}
              onClick={() => {
                setActiveIndex(index);
                props.onChange(item.link);
              }}
            >
              <FormattedMessage id={child.title} />
            </Menu.Item>
          ))}
        </SubMenu>
      );
    }
    return (
      <Menu.Item
        key={index}
        onClick={() => {
          setActiveIndex(index);
          props.onChange(item.link);
        }}
      >
        <FormattedMessage id={item.title} />
      </Menu.Item>
    );
  });

  return (
    <div>
      <Sider
        className='site-layout-background'
        collapsed={props.collapsed}
      >
        <Menu mode='inline' selectedKeys={[String(activeIndex)]} items={listOfItems}/>
      </Sider>
    </div>
  );
};

export default SideBar;