侧边栏壁纸
博主头像
daixinmini的小屋博主等级

阿巴阿巴阿巴

  • 累计撰写 11 篇文章
  • 累计创建 4 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录

A component suspended while responding to synchronous input...

380025303@qq.com
2023-10-18 / 0 评论 / 0 点赞 / 265 阅读 / 2587 字

问题

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>

0
bug
  • ${post.likes!0}

评论区