🐛[BUG] “菜单的高级用法” params 更新了，但request方法未调用

LiangGu commented 3 years ago

🐛 bug 描述

使用了“菜单的高级用法”的第一种后台取菜单数据方法 params 更新了，但request方法未调用

📷 复现步骤

export const layout: RunTimeLayoutConfig  = ({ initialState }) => {
    return {
        menu: {
            loading: true,
            params: initialState,          // 在此与param进行绑定
            request: async (params, defaultMenuData) => {
                let menu:MenuDataItem[] = defaultMenuData;
                console.log( params );      // 在此输出验证是否触发request

                await queryMenuData({ appId: constants.APP_ID }).then((res)=>{
                    menu = loopMenuItem(menuDecorator(res.data));
                });
                return menu;
            }
        },
        rightContentRender: () => <RightContent />,
        disableContentMargin: false,
        footerRender: () => <Footer />,
        onPageChange: () => {
            const { location } = history;
            // 如果没有登录，重定向到 login
            console.log("initialState => ", initialState);      //在此输入检查initialState的值以及更新情况
            if (!initialState?.currentUser && location.pathname !== '/user/login') {
                history.push('/user/login');
            }
        },
        links: [],
        menuHeaderRender: undefined,
        ...initialState?.settings,
    };
};

param绑定initialState
刷新页面回到登录面
点击登录后，取到用户信息更新initialState
程序未调用request方法，如下图输出所示，initialState更新了，但request处输出未调用

🏞 期望结果

登录成功后，取得菜单数据让页面可以正常使用。

💻 复现代码

🚑 其他信息

LiangGu commented 3 years ago

{
    "dependencies": {
        "@ant-design/charts": "^1.0.21",
        "@ant-design/icons": "^4.0.0",
        "@ant-design/pro-card": "^1.10.6",
        "@ant-design/pro-descriptions": "^1.2.0",
        "@ant-design/pro-form": "^1.3.0",
        "@ant-design/pro-layout": "^6.9.0",
        "@ant-design/pro-list": "^1.5.14",
        "@ant-design/pro-table": "2.35.1",
        "@umijs/plugin-openapi": "^1.0.1",
        "@umijs/route-utils": "^1.0.33",
        "antd": "^4.13.0",
        "classnames": "^2.2.6",
        "electron": "^12.0.5",
        "fetch-jsonp": "^1.1.3",
        "initial-state": "^0.2.0",
        "jsencrypt": "3.2.0",
        "less": "^4.1.1",
        "lodash": "^4.17.11",
        "moment": "^2.25.3",
        "omit.js": "^2.0.2",
        "qs": "^6.9.0",
        "react": "^17.0.0",
        "react-dev-inspector": "^1.1.1",
        "react-dom": "^17.0.0",
        "react-helmet-async": "^1.0.4",
        "umi": "^3.3.9",
        "umi-request": "^1.0.8"
    },
    "devDependencies": {
        "@ant-design/pro-cli": "^2.0.2",
        "@types/classnames": "^2.2.7",
        "@types/express": "^4.17.0",
        "@types/history": "^4.7.2",
        "@types/jest": "^26.0.0",
        "@types/lodash": "^4.14.144",
        "@types/qs": "^6.5.3",
        "@types/react": "^17.0.0",
        "@types/react-dom": "^17.0.0",
        "@types/react-helmet": "^6.1.0",
        "@umijs/fabric": "^2.5.2",
        "@umijs/plugin-blocks": "^2.0.5",
        "@umijs/plugin-esbuild": "^1.0.1",
        "@umijs/preset-ant-design-pro": "^1.3.0",
        "@umijs/preset-dumi": "^1.1.0-rc.6",
        "@umijs/preset-react": "^1.7.4",
        "@umijs/yorkie": "^2.0.3",
        "carlo": "^0.9.46",
        "cross-env": "^7.0.0",
        "cross-port-killer": "^1.1.1",
        "detect-installer": "^1.0.1",
        "enzyme": "^3.11.0",
        "eslint": "^7.1.0",
        "express": "^4.17.1",
        "gh-pages": "^3.0.0",
        "jsdom-global": "^3.0.2",
        "lint-staged": "^10.0.0",
        "mockjs": "^1.0.1-beta3",
        "prettier": "^2.0.1",
        "puppeteer-core": "^5.0.0",
        "stylelint": "^13.0.0",
        "typescript": "^4.0.3",
        "xlsx": "^0.16.9"
    },
}

依赖版本 @chenshuai2144 麻烦再看一下，辛苦了

github-actions[bot] commented 3 years ago

以下的 Issues 可能会帮助到你 / The following issues may help you

[#8500][🐛[BUG] “菜单的高级用法” params 更新了，但request方法未调用][100%]

LiangGu commented 3 years ago

以下的 Issues 可能会帮助到你 / The following issues may help you

[#8500][🐛[BUG] “菜单的高级用法” params 更新了，但request方法未调用][100%]

这个 #8500 就是我发的，有些问题，所以取消重发一次

LiangGu commented 3 years ago

@chenshuai2144

fangqibin commented 3 years ago

initialState是个对象，这样应该监听不到变化，可以写成{...initialState}试试

LiangGu commented 3 years ago

但menu.request仍然没有触发

LiangGu commented 3 years ago

@fangqibin 使用了{ ...initialSate }，效果还是一样

chenshuai2144 commented 3 years ago

用 currentUser 呢，diff 算法是这样的

// params 更新的时候重新请求
  useEffect(() => {
    if (!preMenu) {
      return;
    }
    mutate(defaultId);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [defaultId, menu?.params])

LiangGu commented 3 years ago

会在登录时取一次User信息，将信息存入initialState后，每次页面刷新都会取一次User信息。

params绑定了userID, 按理UserID只要未发生变化，菜单内容不用再去获取，但目前只要刷新一次页面就会获取一次。
需要用routes去指向Components, 如果不在routes中配置页面Components指向，动态菜单访问页面会404。
需要在routes中指定默认页面，动态菜单中的redirect不生效。
如果默认页面需要前台routes来配置，那么会导致业务权限的冲突，若前台默认页面非当前用户有权可见页面，则默认页面不生效。
有没有官方交流群？

export const layout: RunTimeLayoutConfig = ({ initialState }) => { return { // actionRef: layoutActionRef, menu: { params: { userId: initialState?.currentUser?.userId, }, request: async (params:any, defaultMenuData:any) => { let menu:MenuDataItem[] = defaultMenuData; await queryMenuData({ appId: constants.APP_ID }).then((res)=>{ menu = loopMenuItem(menuDecorator(res.data)); }); return menu; } }, // menuDataRender: (menuData) => Object.assign(initialState?.menuData??menuData), rightContentRender: () => , disableContentMargin: false, footerRender: () =>

, onPageChange: () => { const { location } = history; // 如果没有登录，重定向到 login if (!initialState?.currentUser && location.pathname !== '/user/login') { history.push('/user/login'); } }, links: [], menuHeaderRender: undefined, ...initialState?.settings, }; };


@chenshuai2144

chenshuai2144 commented 3 years ago

menu?.params 其实每次都不一样，因为是个 obj ，我修一下

ant-design / ant-design-pro