search

ant-design / ant-design-pro

👨🏻‍💻👩🏻‍💻 Use Ant Design like a Pro!
https://pro.ant.design
MIT License
36.33k stars 8.14k forks source link

🧐提前return导致的这种错误，如何正确处理？ #9594

Closed yunshangrourou closed 2 years ago

yunshangrourou commented 2 years ago

🐛 bug 描述

登录正常，但是登出时报错。

🏞 期望结果

用户logou时浏览器不报错。

💻 复现代码

...
  const {currentUser} = initialState;
  if (!currentUser || !currentUser.username) {
    return loading;
  }
...

注释掉以下三行就不报错了，但是注释掉是不是也是非正确操作啊！

...
  if (!currentUser || !currentUser.username) {
    return loading;
  }
...

© package.json文件版本信息

{
  "name": "ant-design-pro",
  "version": "5.0.0",
  "private": true,
  "description": "An out-of-box UI solution for enterprise applications",
  "scripts": {
    "analyze": "cross-env ANALYZE=1 umi build",
    "build": "umi build",
    "deploy": "npm run build && npm run gh-pages",
    "dev": "npm run start:dev",
    "gh-pages": "gh-pages -d dist",
    "i18n-remove": "pro i18n-remove --locale=zh-CN --write",
    "postinstall": "umi g tmp",
    "lint": "umi g tmp && npm run lint:js && npm run lint:style && npm run lint:prettier && npm run tsc",
    "lint-staged": "lint-staged",
    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
    "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style",
    "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
    "lint:prettier": "prettier -c --write \"src/**/*\" --end-of-line auto",
    "lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
    "openapi": "umi openapi",
    "precommit": "lint-staged",
    "prettier": "prettier -c --write \"src/**/*\"",
    "serve": "umi-serve",
    "start": "cross-env UMI_ENV=dev umi dev",
    "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev umi dev",
    "start:no-mock": "cross-env MOCK=none UMI_ENV=dev umi dev",
    "start:no-ui": "cross-env UMI_UI=none UMI_ENV=dev umi dev",
    "start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev umi dev",
    "start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev umi dev",
    "pretest": "node ./tests/beforeTest",
    "test": "umi test",
    "test:all": "node ./tests/run-tests.js",
    "test:component": "umi test ./src/components",
    "tsc": "tsc --noEmit"
  },
  "lint-staged": {
    "**/*.less": "stylelint --syntax less",
    "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
    "**/*.{js,jsx,tsx,ts,less,md,json}": [
      "prettier --write"
    ]
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 10"
  ],
  "dependencies": {
    "@ant-design/charts": "^0.9.4",
    "@ant-design/icons": "^4.5.0",
    "@ant-design/pro-descriptions": "^1.6.8",
    "@ant-design/pro-form": "^1.18.3",
    "@ant-design/pro-layout": "^6.15.3",
    "@ant-design/pro-table": "^2.62.7",
    "@antv/data-set": "^0.11.0",
    "@antv/l7": "^2.3.7",
    "@antv/l7-maps": "^2.3.7",
    "@antv/l7-react": "^2.1.9",
    "@umijs/route-utils": "^1.0.36",
    "ahooks": "^2.0.0",
    "antd": "^4.14.0",
    "bizcharts": "^3.5.3-beta.0",
    "bizcharts-plugin-slider": "^2.1.1-beta.1",
    "classnames": "^2.2.6",
    "gg-editor": "^2.0.2",
    "lodash": "^4.17.11",
    "lodash-decorators": "^6.0.0",
    "moment": "^2.25.3",
    "numeral": "^2.0.6",
    "nzh": "^1.0.3",
    "omit.js": "^2.0.2",
    "react": "^17.0.0",
    "react-dev-inspector": "^1.1.1",
    "react-dom": "^17.0.0",
    "react-fittext": "^1.0.0",
    "react-helmet-async": "^1.0.4",
    "react-router": "^4.3.1",
    "umi": "^3.5.0",
    "umi-serve": "^1.9.10"
  },
  "devDependencies": {
    "@ant-design/pro-cli": "^2.0.2",
    "@types/express": "^4.17.0",
    "@types/history": "^4.7.2",
    "@types/jest": "^26.0.0",
    "@types/lodash": "^4.14.144",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-helmet": "^6.1.0",
    "@umijs/fabric": "^2.6.2",
    "@umijs/openapi": "^1.1.14",
    "@umijs/plugin-blocks": "^2.0.5",
    "@umijs/plugin-esbuild": "^1.0.1",
    "@umijs/plugin-openapi": "^1.2.0",
    "@umijs/preset-ant-design-pro": "^1.2.0",
    "@umijs/preset-dumi": "^1.1.7",
    "@umijs/preset-react": "^1.8.17",
    "@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",
    "eslint-plugin-react": "^7.28.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.3.2",
    "puppeteer-core": "^8.0.0",
    "stylelint": "^13.0.0",
    "typescript": "^4.2.2"
  },
  "engines": {
    "node": ">=10.0.0"
  },
  "gitHooks": {
    "commit-msg": "fabric verify-commit"
  }
}

🚑 浏览器console报错

Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement. at renderWithHooks (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:15059:13) at updateFunctionComponent (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:17365:20) at beginWork (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:19072:16) at HTMLUnknownElement.callCallback (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:3954:14) at Object.invokeGuardedCallbackDev (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:4003:16) at invokeGuardedCallback (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:4065:31) at beginWork$1 (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:23968:7) at performUnitOfWork (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:22780:12) at workLoopSync (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:22711:5) at renderRootSync (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:22674:7) at performSyncWorkOnRoot (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:22297:18) at mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:11336:26 at unstable_runWithPriority (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:27147:12) at runWithPriority$1 (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:11285:10) at flushSyncCallbackQueueImpl (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:11331:9) at flushSyncCallbackQueue (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:11318:3) at flushPassiveEffectsImpl (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:23624:3) at unstable_runWithPriority (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:27147:12) at runWithPriority$1 (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:11285:10) at flushPassiveEffects (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:23451:14) at mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:23328:11 at workLoop (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:27096:34) at flushWork (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:27069:14) at MessagePort.performWorkUntilDeadline (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:26836:27) renderWithHooks @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:15059 updateFunctionComponent @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:17365 beginWork @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:19072 callCallback @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:3954 invokeGuardedCallbackDev @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:4003 invokeGuardedCallback @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:4065 beginWork$1 @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:23968 performUnitOfWork @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:22780 workLoopSync @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:22711 renderRootSync @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:22674 performSyncWorkOnRoot @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:22297 (anonymous) @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:11336 unstable_runWithPriority @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:27147 runWithPriority$1 @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:11285 flushSyncCallbackQueueImpl @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:11331 flushSyncCallbackQueue @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:11318 flushPassiveEffectsImpl @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:23624 unstable_runWithPriority @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:27147 runWithPriority$1 @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:11285 flushPassiveEffects @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:23451 (anonymous) @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:23328 workLoop @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:27096 flushWork @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:27069 performWorkUntilDeadline @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:26836 devScripts.js:6523 The above error occurred in the component:

at Workplace (http://192.168.56.1:8000/p__home.fd3b39aeabfa56485274.hot-update.js:189:19)
at LoadableComponent (http://192.168.56.1:8000/mf-dep_vendors-node_modules_umi_node_modules_umijs_runtime_dist_index_esm_js.eb4fd323.async.js:393:68)
at Route
at Switch
at WithExceptionOpChildren (http://192.168.56.1:8000/.umi__plugin-layout__Layout.js:253:24)
at main
at Basic (http://192.168.56.1:8000/mf-dep_vendors-node_modules_antd_es_menu_index_js.bd6cdb32.async.js:429:25)
at Adapter (http://192.168.56.1:8000/mf-dep_vendors-node_modules_antd_es_menu_index_js.bd6cdb32.async.js:412:66)
at ErrorBoundary (http://192.168.56.1:8000/mf-dep_vendors-node_modules_ant-design_pro-layout_es_index_js-node_modules_antd_es__util_getDataOrAr-d20f22.61f7b87a.async.js:5988:87)
at SWRConfig$1 (http://192.168.56.1:8000/mf-dep_vendors-node_modules_babel_runtime_helpers_esm_createForOfIteratorHelper_js-node_modules_umij-f8504d.318850fd.async.js:1417:23)
at ConfigProviderWrap (http://192.168.56.1:8000/mf-dep_vendors-node_modules_ant-design_pro-provider_es_index_js-node_modules_ant-design_pro-utils_es-3c4778.0d832eda.async.js:236:23)
at WrapContent (http://192.168.56.1:8000/mf-dep_vendors-node_modules_ant-design_pro-layout_es_index_js-node_modules_antd_es__util_getDataOrAr-d20f22.61f7b87a.async.js:958:21)
at div
at section
at BasicLayout (http://192.168.56.1:8000/mf-dep_vendors-node_modules_antd_es_menu_index_js.bd6cdb32.async.js:444:63)
at Adapter (http://192.168.56.1:8000/mf-dep_vendors-node_modules_antd_es_menu_index_js.bd6cdb32.async.js:412:66)
at div
at Provider (http://192.168.56.1:8000/mf-dep_vendors-node_modules_ant-design_pro-layout_es_index_js-node_modules_antd_es__util_getDataOrAr-d20f22.61f7b87a.async.js:12894:31)
at BasicLayout (http://192.168.56.1:8000/mf-dep_vendors-node_modules_ant-design_pro-layout_es_index_js-node_modules_antd_es__util_getDataOrAr-d20f22.61f7b87a.async.js:383:67)
at BasicLayout (http://192.168.56.1:8000/.umi__plugin-layout__Layout.js:821:24)
at SrcUmiPluginlayoutLayout (http://192.168.56.1:8000/.umi__plugin-layout__Layout.js:42:19)
at LoadableComponent (http://192.168.56.1:8000/mf-dep_vendors-node_modules_umi_node_modules_umijs_runtime_dist_index_esm_js.eb4fd323.async.js:393:68)
at Route
at Switch
at Router (http://192.168.56.1:8000/mf-dep_vendors-node_modules_react-router-dom_esm_react-router-dom_js.d0ceebf5.async.js:3229:30)
at RouterComponent (http://192.168.56.1:8000/mf-dep_vendors-node_modules_babel_runtime_helpers_esm_objectWithoutPropertiesLoose_js-node_modules_b-7797da.075049d7.async.js:610:23)
at AccessProvider (http://192.168.56.1:8000/umi.js:1136:24)
at Provider (http://192.168.56.1:8000/mf-dep_vendors-node_modules_dva_dist_index_esm_js.bd279128.async.js:2431:20)
at _DvaContainer (http://192.168.56.1:8000/umi.js:1863:5)
at SrcUmiPlugininitialstateProvider (http://192.168.56.1:8000/umi.js:2156:24)
at FormProvider (http://192.168.56.1:8000/mf-dep_vendors-node_modules_ant-design_icons_es_icons_LoadingOutlined_js-node_modules_antd_es__util_-a9dcf0.8f1fde01.async.js:2596:31)
at LocaleProvider (http://192.168.56.1:8000/mf-dep_vendors-node_modules_antd_es_config-provider_index_js-node_modules_antd_es_message_index_js.d7318641.async.js:896:87)
at ProviderChildren (http://192.168.56.1:8000/mf-dep_vendors-node_modules_antd_es_config-provider_index_js-node_modules_antd_es_message_index_js.d7318641.async.js:726:24)
at LocaleReceiver (http://192.168.56.1:8000/mf-dep_vendors-node_modules_antd_es_config-provider_context_js.984d0515.async.js:720:87)
at ConfigProvider (http://192.168.56.1:8000/mf-dep_vendors-node_modules_antd_es_config-provider_index_js-node_modules_antd_es_message_index_js.d7318641.async.js:834:13)
at _LocaleContainer (http://192.168.56.1:8000/umi.js:3465:31)
at SrcUmiPluginmodelProvider (http://192.168.56.1:8000/umi.js:4058:23)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary. console. @ devScripts.js:6523 logCapturedError @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:20094 update.payload @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:20137 getStateFromUpdate @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:12111 processUpdateQueue @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:12259 updateClassInstance @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:13022 updateClassComponent @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:17441 beginWork @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:19082 beginWork$1 @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:23944 performUnitOfWork @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:22780 workLoopSync @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:22711 renderRootSync @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:22674 performSyncWorkOnRoot @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:22297 (anonymous) @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:11336 unstable_runWithPriority @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:27147 runWithPriority$1 @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:11285 flushSyncCallbackQueueImpl @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:11331 flushSyncCallbackQueue @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:11318 flushPassiveEffectsImpl @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:23624 unstable_runWithPriority @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:27147 runWithPriority$1 @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:11285 flushPassiveEffects @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:23451 (anonymous) @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:23328 workLoop @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:27096 flushWork @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:27069 performWorkUntilDeadline @ mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:26836 mf-dep_vendors-node_modules_ant-design_pro-layout_es_index_js-node_modules_antd_es__util_getDataOrAr-d20f22.61f7b87a.async.js:6007 Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement. at renderWithHooks (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:15059:13) at updateFunctionComponent (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:17365:20) at beginWork (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:19072:16) at HTMLUnknownElement.callCallback (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:3954:14) at Object.invokeGuardedCallbackDev (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:4003:16) at invokeGuardedCallback (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:4065:31) at beginWork$1 (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:23968:7) at performUnitOfWork (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:22780:12) at workLoopSync (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:22711:5) at renderRootSync (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:22674:7) at performSyncWorkOnRoot (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:22297:18) at mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:11336:26 at unstable_runWithPriority (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:27147:12) at runWithPriority$1 (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:11285:10) at flushSyncCallbackQueueImpl (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:11331:9) at flushSyncCallbackQueue (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:11318:3) at flushPassiveEffectsImpl (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:23624:3) at unstable_runWithPriority (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:27147:12) at runWithPriority$1 (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:11285:10) at flushPassiveEffects (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:23451:14) at mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:23328:11 at workLoop (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:27096:34) at flushWork (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:27069:14) at MessagePort.performWorkUntilDeadline (mf-dep_vendors-node_modules_react-dom_index_js.7bb20710.async.js:26836:27) {componentStack: '\n at Workplace (http://192.168.56.1:8000/p__hom…rovider (http://192.168.56.1:8000/umi.js:4058:23)'}

chenshuai2144 commented 2 years ago

https://stackoverflow.com/questions/59899419/react-js-rendered-fewer-hooks-than-expected-this-may-be-caused-by-an-accidenta

hooks 的定义要放到return之前，你估计是在下面搞了个新的 hooks 出来。