项目中用到这个框架,当然是很好用且方便的,但是实际使用的时候发现项目中限制了一些自定义内容,踩了几个坑,记录一下~
动态菜单调用接口异步,页面上显示空白
解决方案:将方法放在getInitialState中查询,存在initialState里,因为我的需求是route数据部分从接口中读取,所以在接口查询出数据后做了数据拼接。如果完全依赖后端给的接口来加载route,可以直接存res.data到initialState。
import type { Settings as LayoutSettings,MenuDataItem } from '@ant-design/pro-components';
import routes from '../config/routes';
import api from '@/services'
export async function getInitialState(): Promise<{
route:MenuDataItem[],
}> {
const data = await api.getTagTypeList({tag_type:'platform'}).then((res:any)=>{
const routesArr = [...routes]
const apiMarket = res.data.map(item=>{
return{
path:`${item.web_url}?tag_code=${item.tag_code}`,
name:item.tag_name,
component: './Market',
icon:item.icon
}
})
routesArr[routesArr.findIndex(item=>item.path=='market')].routes=apiMarket
return routesArr
})
return {
route:data,
};
}
menu数据配置
这里以为返回一个对象即可,找了半天问题发现menu一定要按照格式来写。这里注意setting中如果设置menu无效果,可以把menu赋值放在数组后面,否则可能会被本身的menu覆盖。
menu:{
params: {
},
request: async (params, defaultMenuData: []) => {
// 所以请问为什么一定要这样写才能出来??
return initialState?.route
},
},