Skip to content
This repository was archived by the owner on Aug 11, 2020. It is now read-only.
This repository was archived by the owner on Aug 11, 2020. It is now read-only.

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

@mrhsiang

Description

@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={() => <DefaultFooterDom />}
  menuDataRender={() => menuDataRender(menuData)}
  rightContentRender={() => <RightContent />}
  {...props}
  {...settings}
>
  <Authorized authority={authorized.authority} noMatch={noMatch}>
    {children}
  </Authorized>
</ProLayout>

);
};

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

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions