极客观点
项目管理
HarmonyOS
问题描述
使用ant-design-pro模板。 https://github.com/ant-design...
想实现从后台请求菜单数据，数据可以正确获取，并且state改变也是正确的，但是在页面渲染的时候，并不能将数据加载到菜单组件中。
获取菜单数据部分，我是写入componentWillMount函数中。
class BasicLayout extends React.PureComponent {
……
componentWillMount() {
const { dispatch } = this.props;
dispatch({
type: 'user/fetchMenu',
});
}
……
}但是再次进行登录，由于state中已经有了菜单数据，所以可以正确加载菜单以及数据。
问题出现的环境背景及自己尝试过哪些方法
我注意到BasicLayout这个大的组件和SideMenu这两个组件都是使用PureComponent，不知是否和这个相关？
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { Icon, Layout, message } from 'antd';
import DocumentTitle from 'react-document-title';
import { connect } from 'dva';
import { Redirect, Route, routerRedux, Switch } from 'dva/router';
import { ContainerQuery } from 'react-container-query';
import classNames from 'classnames';
import pathToRegexp from 'path-to-regexp';
import { enquireScreen, unenquireScreen } from 'enquire-js';
import GlobalHeader from '../components/GlobalHeader';
import GlobalFooter from '../components/GlobalFooter';
import SiderMenu from '../components/SiderMenu';
import NotFound from '../routes/Exception/404';
import { getRoutes } from '../utils/utils';
import Authorized from '../utils/Authorized';
import { getMenuData } from '../common/menu';
import logo from '../assets/logo.svg';
const { Content, Header, Footer } = Layout;
const { AuthorizedRoute, check } = Authorized;
/**
* 根据菜单取得重定向地址.
*/
const redirectData = [];
const getRedirect = item => {
if (item && item.children) {
if (item.children[0] && item.children[0].path) {
redirectData.push({
from: `${item.path}`,
to: `${item.children[0].path}`,
});
item.children.forEach(children => {
getRedirect(children);
});
}
}
};
getMenuData().forEach(getRedirect);
/**
* 获取面包屑映射
* @param {Object} menuData 菜单配置
* @param {Object} routerData 路由配置
*/
const getBreadcrumbNameMap = (menuData, routerData) => {
const result = {};
const childResult = {};
for (const i of menuData) {
if (!routerData[i.path]) {
result[i.path] = i;
}
if (i.children) {
Object.assign(childResult, getBreadcrumbNameMap(i.children, routerData));
}
}
return Object.assign({}, routerData, result, childResult);
};
const query = {
'screen-xs': {
maxWidth: 575,
},
'screen-sm': {
minWidth: 576,
maxWidth: 767,
},
'screen-md': {
minWidth: 768,
maxWidth: 991,
},
'screen-lg': {
minWidth: 992,
maxWidth: 1199,
},
'screen-xl': {
minWidth: 1200,
maxWidth: 1599,
},
'screen-xxl': {
minWidth: 1600,
},
};
let isMobile;
enquireScreen(b => {
isMobile = b;
});
class BasicLayout extends React.Component {
static childContextTypes = {
location: PropTypes.object,
breadcrumbNameMap: PropTypes.object,
};
state = {
isMobile,
};
getChildContext() {
const { location, routerData, menu } = this.props;
return {
location,
breadcrumbNameMap: getBreadcrumbNameMap(menu, routerData), // getMenuData()
};
}
componentWillMount() {
const { dispatch } = this.props;
dispatch({
type: 'user/fetchMenu',
});
}
componentDidMount() {
this.enquireHandler = enquireScreen(mobile => {
this.setState({
isMobile: mobile,
});
});
const { dispatch } = this.props;
dispatch({
type: 'user/fetchCurrent',
});
}
componentWillUnmount() {
unenquireScreen(this.enquireHandler);
}
getPageTitle() {
const { routerData, location } = this.props;
const { pathname } = location;
let title = '沃协同';
let currRouterData = null;
// match params path
Object.keys(routerData).forEach(key => {
if (pathToRegexp(key).test(pathname)) {
currRouterData = routerData[key];
}
});
if (currRouterData && currRouterData.name) {
title = `${currRouterData.name} - 沃协同`;
}
return title;
}
getBaseRedirect = () => {
// According to the url parameter to redirect
// 这里是重定向的,重定向到 url 的 redirect 参数所示地址
const urlParams = new URL(window.location.href);
const redirect = urlParams.searchParams.get('redirect');
// Remove the parameters in the url
if (redirect) {
urlParams.searchParams.delete('redirect');
window.history.replaceState(null, 'redirect', urlParams.href);
} else {
const { routerData } = this.props;
// get the first authorized route path in routerData
const authorizedPath = Object.keys(routerData).find(
item => check(routerData[item].authority, item) && item !== '/'
);
return authorizedPath;
}
return redirect;
};
handleMenuCollapse = collapsed => {
const { dispatch } = this.props;
dispatch({
type: 'global/changeLayoutCollapsed',
payload: collapsed,
});
};
handleNoticeClear = type => {
message.success(`清空了${type}`);
const { dispatch } = this.props;
dispatch({
type: 'global/clearNotices',
payload: type,
});
};
handleMenuClick = ({ key }) => {
const { dispatch } = this.props;
if (key === 'triggerError') {
dispatch(routerRedux.push('/exception/trigger'));
return;
}
if (key === 'logout') {
dispatch({
type: 'login/logout',
});
}
};
handleNoticeVisibleChange = visible => {
const { dispatch } = this.props;
if (visible) {
dispatch({
type: 'global/fetchNotices',
});
}
};
render() {
const {
currentUser,
collapsed,
fetchingNotices,
notices,
routerData,
match,
location,
menu,
} = this.props;
const { isMobile: mb } = this.state;
const bashRedirect = this.getBaseRedirect();
const layout = (
<Layout>
<SiderMenu
logo={logo}
// 不带Authorized参数的情况下如果没有权限,会强制跳到403界面
// If you do not have the Authorized parameter
// you will be forced to jump to the 403 interface without permission
Authorized={Authorized}
menuData={menu} // JSON.parse(localStorage.getItem('menu'))
collapsed={collapsed}
location={location}
isMobile={mb}
onCollapse={this.handleMenuCollapse}
/>
<Layout>
<Header style={{ padding: 0 }}>
<GlobalHeader
logo={logo}
currentUser={currentUser}
fetchingNotices={fetchingNotices}
notices={notices}
collapsed={collapsed}
isMobile={mb}
onNoticeClear={this.handleNoticeClear}
onCollapse={this.handleMenuCollapse}
onMenuClick={this.handleMenuClick}
onNoticeVisibleChange={this.handleNoticeVisibleChange}
/>
</Header>
<Content style={{ margin: '24px 24px 0', height: '100%' }}>
<Switch>
{redirectData.map(item => (
<Redirect key={item.from} exact from={item.from} to={item.to} />
))}
{getRoutes(match.path, routerData).map(item => (
<AuthorizedRoute
key={item.key}
path={item.path}
component={item.component}
exact={item.exact}
authority={item.authority}
redirectPath="/exception/403"
/>
))}
<Redirect exact from="/" to={bashRedirect} />
<Route render={NotFound} />
</Switch>
</Content>
<Footer style={{ padding: 0 }}>
<GlobalFooter
links={[
{
key: 'Jenkins',
title: 'Jenkins',
href: 'http://10.124.210.64:8080',
blankTarget: true,
},
{
key: 'gitlab',
title: <Icon type="gitlab" />,
href: 'http://10.124.210.40:8080/',
blankTarget: true,
},
{
key: 'Marathon',
title: 'Marathon',
href: 'http://10.124.210.41:8080/ui/#/apps',
blankTarget: true,
},
]}
copyright={
<Fragment>
Copyright <Icon type="copyright" /> 2018 联通系统集成-沃协同项目组
</Fragment>
}
/>
</Footer>
</Layout>
</Layout>
);
return (
<DocumentTitle title={this.getPageTitle()}>
<ContainerQuery query={query}>
{params => <div className={classNames(params)}>{layout}</div>}
</ContainerQuery>
</DocumentTitle>
);
}
}
function mapStateToProps(state) {
return {
...state,
menu: state.user.menu,
currentUser: state.user.currentUser,
collapsed: state.global.collapsed,
fetchingNotices: state.loading.effects['global/fetchNotices'],
notices: state.global.notices,
};
}
export default connect(mapStateToProps)(BasicLayout);
在github上提了issue，后来找到答案了
https://github.com/ant-design...