pro-components

pro-components copied to clipboard

🧐 问题描述

正常刷新页面没有问题，在使用portable，用request拉取数据，代码修改之后，触动了hot reload，页面就停止不动，并且报错，需要手动刷新页面

bug infomration： Cannot read properties of undefined (reading '0')

capture：

浏览器错误信息： Uncaught TypeError: Cannot read properties of undefined (reading '0') at genProColumnToColumn.js:65:1 at Array.map () at genProColumnToColumn (genProColumnToColumn.js:27:1) at Table.js:653:1 at updateMemo (react-dom.development.js:15444:1) at Object.useMemo (react-dom.development.js:15895:1) at useMemo (react.development.js:1492:1) at wrappedHook (react-hot-loader.development.js:2801:1) at ProTable (Table.js:650:1) at renderWithHooks (react-dom.development.js:14799:1) at updateFunctionComponent (react-dom.development.js:16978:1) at beginWork (react-dom.development.js:18505:1) at HTMLUnknownElement.callCallback (react-dom.development.js:191:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:240:1) at invokeGuardedCallback (react-dom.development.js:293:1) at beginWork$1 (react-dom.development.js:23057:1) at performUnitOfWork (react-dom.development.js:22021:1) at workLoopSync (react-dom.development.js:21997:1) at performSyncWorkOnRoot (react-dom.development.js:21615:1) at react-dom.development.js:11133:1 at unstable_runWithPriority (scheduler.development.js:659:1) at runWithPriority$1 (react-dom.development.js:11079:1) at flushSyncCallbackQueueImpl (react-dom.development.js:11128:1) at flushSyncCallbackQueue (react-dom.development.js:11116:1) at Object.batchedUpdates$1 [as unstable_batchedUpdates] (react-dom.development.js:21721:1) at react-hot-loader.development.js:3110:1 at react-hot-loader.development.js:3069:1 (anonymous) @ genProColumnToColumn.js:65 genProColumnToColumn @ genProColumnToColumn.js:27 (anonymous) @ Table.js:653 updateMemo @ react-dom.development.js:15444 useMemo @ react-dom.development.js:15895 useMemo @ react.development.js:1492 wrappedHook @ react-hot-loader.development.js:2801 ProTable @ Table.js:650 renderWithHooks @ react-dom.development.js:14799 updateFunctionComponent @ react-dom.development.js:16978 beginWork @ react-dom.development.js:18505 callCallback @ react-dom.development.js:191 invokeGuardedCallbackDev @ react-dom.development.js:240 invokeGuardedCallback @ react-dom.development.js:293 beginWork$1 @ react-dom.development.js:23057 performUnitOfWork @ react-dom.development.js:22021 workLoopSync @ react-dom.development.js:21997 performSyncWorkOnRoot @ react-dom.development.js:21615 (anonymous) @ react-dom.development.js:11133 unstable_runWithPriority @ scheduler.development.js:659 runWithPriority$1 @ react-dom.development.js:11079 flushSyncCallbackQueueImpl @ react-dom.development.js:11128 flushSyncCallbackQueue @ react-dom.development.js:11116 batchedUpdates$1 @ react-dom.development.js:21721 (anonymous) @ react-hot-loader.development.js:3110 (anonymous) @ react-hot-loader.development.js:3069 Promise.then (async) add @ react-hot-loader.development.js:3068 deepUpdate @ react-hot-loader.development.js:3127 Promise.then (async) updateInstances @ react-hot-loader.development.js:3168 (anonymous) @ react-hot-loader.development.js:3181 hotSetStatus @ bootstrap:291 hotApplyInternal @ bootstrap:687 hotApply @ bootstrap:411 (anonymous) @ bootstrap:386 Promise.then (async) hotUpdateDownloaded @ bootstrap:385 hotAddUpdateChunk @ bootstrap:361 webpackHotUpdateCallback @ bootstrap:57 (anonymous) @ main.d03e8f58f3f7b5f98caa.hot-update.js:1 index.js:1517 The above error occurred in the <ProTable> component: in ProTable (created by ProviderWarp) in ErrorBoundary (created by ProviderWarp) in FormProvider (created by ProviderChildren) in LocaleProvider (created by ProviderChildren) in ProviderChildren (created by Context.Consumer) in LocaleReceiver (created by ConfigProvider) in ConfigProvider (created by Context.Consumer) in ConfigProviderWrap (created by ProviderWarp) in Provider (created by ProviderWarp) in ProviderWarp (at Data.tsx:239) in _default (created by Context.Consumer) in Route (at App.jsx:44) in Switch (at App.jsx:59) in div (at Layout.jsx:9) in div (at Layout.jsx:7) in SmallAssetsLayout (at App.jsx:37) in Route (at App.jsx:34) in Switch (at App.jsx:59) in main (created by ForwardRef) in ForwardRef (created by Content) in Content (at Layout.jsx:24) in section (created by ForwardRef) in ForwardRef (created by Layout) in Layout (at Layout.jsx:23) in section (created by ForwardRef) in ForwardRef (created by Layout) in Layout (at Layout.jsx:15) in section (created by ForwardRef) in ForwardRef (created by Layout) in Layout (at Layout.jsx:13) in ExchangeLayout (at App.jsx:37) in Route (at App.jsx:34) in Switch (at App.jsx:59) in div (at App.jsx:8) in div (at App.jsx:7) in App (at App.jsx:37) in Route (at App.jsx:34) in Switch (at App.jsx:59) in Router (created by ConnectedRouter) in ConnectedRouter (created by Context.Consumer) in ConnectedRouterWithContext (created by Connect(ConnectedRouterWithContext)) in Connect(ConnectedRouterWithContext) (at App.jsx:74) in Provider (at App.jsx:73) in Root (created by HotExportedRoot) in AppContainer (created by HotExportedRoot) in HotExportedRoot (at desktop/index.jsx:8)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary. console. @ index.js:1517 overrideMethod @ react_devtools_backend.js:4026 logCapturedError @ react-dom.development.js:19413 logError @ react-dom.development.js:19449 update.payload @ react-dom.development.js:20580 getStateFromUpdate @ react-dom.development.js:12339 processUpdateQueue @ react-dom.development.js:12467 updateClassInstance @ react-dom.development.js:13203 updateClassComponent @ react-dom.development.js:17050 beginWork @ react-dom.development.js:18515 beginWork$1 @ react-dom.development.js:23033 performUnitOfWork @ react-dom.development.js:22021 workLoopSync @ react-dom.development.js:21997 performSyncWorkOnRoot @ react-dom.development.js:21615 (anonymous) @ react-dom.development.js:11133 unstable_runWithPriority @ scheduler.development.js:659 runWithPriority$1 @ react-dom.development.js:11079 flushSyncCallbackQueueImpl @ react-dom.development.js:11128 flushSyncCallbackQueue @ react-dom.development.js:11116 batchedUpdates$1 @ react-dom.development.js:21721 (anonymous) @ react-hot-loader.development.js:3110 (anonymous) @ react-hot-loader.development.js:3069 Promise.then (async) add @ react-hot-loader.development.js:3068 deepUpdate @ react-hot-loader.development.js:3127 Promise.then (async) updateInstances @ react-hot-loader.development.js:3168 (anonymous) @ react-hot-loader.development.js:3181 hotSetStatus @ bootstrap:291 hotApplyInternal @ bootstrap:687 hotApply @ bootstrap:411 (anonymous) @ bootstrap:386 Promise.then (async) hotUpdateDownloaded @ bootstrap:385 hotAddUpdateChunk @ bootstrap:361 webpackHotUpdateCallback @ bootstrap:57 (anonymous) @ main.d03e8f58f3f7b5f98caa.hot-update.js:1 index.js:36 TypeError: Cannot read properties of undefined (reading '0') at genProColumnToColumn.js:65:1 at Array.map () at genProColumnToColumn (genProColumnToColumn.js:27:1) at Table.js:653:1 at updateMemo (react-dom.development.js:15444:1) at Object.useMemo (react-dom.development.js:15895:1) at useMemo (react.development.js:1492:1) at wrappedHook (react-hot-loader.development.js:2801:1) at ProTable (Table.js:650:1) at renderWithHooks (react-dom.development.js:14799:1) at updateFunctionComponent (react-dom.development.js:16978:1) at beginWork (react-dom.development.js:18505:1) at HTMLUnknownElement.callCallback (react-dom.development.js:191:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:240:1) at invokeGuardedCallback (react-dom.development.js:293:1) at beginWork$1 (react-dom.development.js:23057:1) at performUnitOfWork (react-dom.development.js:22021:1) at workLoopSync (react-dom.development.js:21997:1) at performSyncWorkOnRoot (react-dom.development.js:21615:1) at react-dom.development.js:11133:1 at unstable_runWithPriority (scheduler.development.js:659:1) at runWithPriority$1 (react-dom.development.js:11079:1) at flushSyncCallbackQueueImpl (react-dom.development.js:11128:1) at flushSyncCallbackQueue (react-dom.development.js:11116:1) at Object.batchedUpdates$1 [as unstable_batchedUpdates] (react-dom.development.js:21721:1) at react-hot-loader.development.js:3110:1 at react-hot-loader.development.js:3069:1 {componentStack: '\n in ProTable (created by ProviderWarp)\n in …)\n in HotExportedRoot (at desktop/index.jsx:8)'}

版本信息： "dependencies": { "@ant-design/pro-table": "2.76.4", "@types/history": "4.7.11", "antd": "^4.19.4", "array-move": "^4.0.0", "axios": "^0.19.2", "by-dynamic-domain": "^0.17.0", "by-env": "^1.5.2", "by-fetch": "^0.15.2", "by-helpers": "^0.15.0", "by-storage": "^0.15.2", "classnames": "^2.2.6", "connected-react-router": "^6.8.0", "dayjs": "^1.10.6", "i18next": "^19.8.7", "prop-types": "^15.7.2", "react": "^16.13.1", "react-dom": "^16.13.1", "react-i18next": "^11.8.5", "react-redux": "^7.2.0", "react-router-dom": "^5.2.0", "react-sortable-hoc": "^2.0.0", "redux": "^4.0.5", "redux-thunk": "^2.3.0", "umi-request": "^1.3.5", "url-parse": "^1.4.7" },

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

• [#5348][ProTable][70%]

以上都没有相关的解答方案

这个热刷新会把 columns 变成空。就出现这个问题了

fix in fcfd8f591

暂时绕开一下