🐛[BUG] menuDataRender采用后台获取左侧菜单，第一次进入以及刷新页面，选中菜单未高亮

[mrhsiang]

🐛 bug 描述 [详细地描述 bug，让大家都能理解]

menuDataRender采用后台获取左侧菜单，第一次进入以及刷新页面，选中菜单未高亮 当采用config中配置的，页面一切正常，只有在后台动态返回的情况会出现菜单未高亮的情况

📷 复现步骤 [清晰描述复现步骤，让别人也能看到问题]

启动项目，页面进入时，默认选中路由 ‘/’，重定向至 ‘Welcome’, 但左侧菜单未高亮显示；对菜单某一个项点击选中时，此时出现高亮，接着在该高亮页面进行浏览器刷新操作，左侧菜单无法高亮，并且所有菜单折叠收起。

🏞 期望结果 [描述你原本期望看到的结果]

高亮正常

💻 复现代码 [提供可复现的代码，仓库，或线上示例]

BasicLayout: `/**

• Ant Design Pro v4 use @ant-design/pro-layout to handle Layout.
• You can view component api by:
• https://github.com/ant-design/ant-design-pro-layout */ import ProLayout from '@ant-design/pro-layout'; import React, { useEffect } from 'react'; import { Link, useIntl, connect, history } from 'umi'; import { Result, Button } from 'antd'; import Authorized from '@/utils/Authorized'; import RightContent from '@/components/GlobalHeader/RightContent'; import { getAuthorityFromRouter } from '@/utils/utils';

import DefaultFooterDom from './Footer'; import logo from '../assets/logo.svg';

const noMatch = ( <Result status={403} title="403" subTitle="Sorry, you are not authorized to access this page." extra={

Go Login

}

/> );

/**

• use Authorized check all menu item */ const menuDataRender = menuList => { return menuList.map(item => { const localItem = { ...item, icon: iconEnum[item.icon], key: item.path, children: item.children ? menuDataRender(item.children) : '', }; return Authorized.check(item.authority, localItem, null); }) }

const BasicLayout = props => { const { dispatch, children, settings, menuData, location = { pathname: '/', }, } = props;

// 获取menu useEffect(() => { if (dispatch) { dispatch({ type: 'menu/fetchMenuList', }); } }, []);

/**

• constructor */

  useEffect(() => { if (dispatch) { dispatch({ type: 'user/fetchCurrent', }); } }, []);

  /**

• init variables */

  const handleMenuCollapse = payload => { if (dispatch) { dispatch({ type: 'global/changeLayoutCollapsed', payload, }); } }; // get children authority

  const authorized = getAuthorityFromRouter(props.route.routes, location.pathname || '/') || { authority: undefined, };

  const { formatMessage } = useIntl(); return ( <ProLayout logo={logo} formatMessage={formatMessage} onCollapse={handleMenuCollapse} onMenuHeaderClick={() => history.push('/')} menuItemRender={(menuItemProps, defaultDom) => { if (menuItemProps.isUrl || !menuItemProps.path) { return defaultDom; }

  return <Link to={menuItemProps.path}>{defaultDom}</Link>;

  }} // breadcrumbRender={(routers = []) => [ // { // path: '/', // breadcrumbName: formatMessage({ // id: 'menu.home', // }), // }, // ...routers, // ]} itemRender={() => ''} footerRender={() => } menuDataRender={() => menuDataRender(menuData)} rightContentRender={() => } {...props} {...settings}

  {children}

  ); };

export default connect(({ global, settings, menu }) => ({ collapsed: global.collapsed, settings, menuData: menu.menuData }))(BasicLayout); `

menu后台返回数据结构： { message: { code: 200, level: 'normal', message: 'sucsess', }, data: [ { path: '/first', name: '一级菜单A', icon: 'smile', }, { path: '/second', name: '一级菜单B', icon: 'smile', authority: ['user'], children: [ { path: '/second/sub', name: '二级菜单B-1', }, ], }, { path: '/forth', name: '一级菜单D', icon: 'smile', authority: ['user', 'admin'], children: [ { path: '/forth/forth-sub-1', name: '二级菜单D-1', children: [ { path: '/forth/forth-sub-1/forth-sub-sub56757', name: '三级菜单D-1-1', }, ], }, ], }, { path: '/admin', name: 'admin', icon: 'smile', authority: ['admin'], children: [ { path: '/admin/sub-page', name: 'sub-page', authority: ['admin'], }, ], }, { name: 'list.table-list', path: '/list', icon: 'smile', }, ] }); }

© 版本信息

• Ant Design Pro 版本: "4.1.0"
• umi 版本 "^3.2.0"
• 浏览器环境 谷歌
• 开发环境 [e.g. mac OS] win10

🚑 其他信息 [如截图等其他信息可以贴在这里]

[johnnylc]

580