完美解决umi+ProLayout 部分菜单动态的问题

项目中用到这个框架，当然是很好用且方便的，但是实际使用的时候发现项目中限制了一些自定义内容，踩了几个坑，记录一下~

动态菜单调用接口异步，页面上显示空白

解决方案：将方法放在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
      },
    },