问题
The above error occurred in one of your React components:
at Lazy
at div
at main
at eval (webpack-internal:///./node_modules/antd/es/layout/layout.js:59:18)
at Content
at div
at eval (webpack-internal:///./node_modules/antd/es/layout/layout.js:79:42)
at Layout
at MotionWrapper (webpack-internal:///./node_modules/antd/es/config-provider/MotionWrapper.js:16:5)
at ProviderChildren (webpack-internal:///./node_modules/antd/es/config-provider/index.js:133:5)
at ConfigProvider (webpack-internal:///./node_modules/antd/es/config-provider/index.js:387:54)
at Main (webpack-internal:///./src/views/main/Main.jsx:61:66)
at RenderedRoute (webpack-internal:///./node_modules/react-router/dist/index.js:554:5)
at Routes (webpack-internal:///./node_modules/react-router/dist/index.js:1170:5)
at Router (webpack-internal:///./node_modules/react-router/dist/index.js:1108:15)
at BrowserRouter (webpack-internal:///./node_modules/react-router-dom/dist/index.js:399:5)
at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:16:3)
at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:16:3)
at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:16:3)
at FocaProvider (webpack-internal:///./node_modules/foca/dist/esm/index.js:1464:26)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
react-dom.development.js:19055 Uncaught Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.
at throwException (react-dom.development.js:19055:1)
at handleError (react-dom.development.js:26311:1)
at renderRootSync (react-dom.development.js:26437:1)
at recoverFromConcurrentError (react-dom.development.js:25850:1)
at performSyncWorkOnRoot (react-dom.development.js:26096:1)
at flushSyncCallbacks (react-dom.development.js:12042:1)
at eval (react-dom.development.js:25651:1)
原因
在使用懒加载组件时,可能还未加载完成,导致的不可预知的错误
解决
套一层Suspense组件
import React, { Suspense } from "react";
<Suspense>
<LazyComponent />
</Suspense>
评论区