响应同步输入时挂起的组件答案

【问题标题】：A component suspended while responding to synchronous input响应同步输入时挂起的组件
【发布时间】：2022-07-13 07:37:40
【问题描述】：

error 错误：组件在响应同步输入时挂起。这将导致 UI 被加载指示器替换。要解决此问题，应使用 startTransition 包装暂停的更新。

当我从组件 B 导航到 A 时，我想保留组件 A 的先前状态。在 React v17 和 React Router v5 中，我能够实现先前的状态。但是使用 React v18，我得到了上述错误。有什么想法吗？

组件 A：

const ComponentA = React.lazy(() => import('./ComponentA'));

const App = () => (
  <Suspense fallback={<Loader/>}>
     <Provider store={store}>
       <ComponentA/>
     </Provider>
  </Suspense>
)

组件 B：

const ComponentB = React.lazy(() => import('./ComponentB'));

const App = () => (
  <Suspense fallback={<Loader/>}>
    <Provider store={store}>
      <ComponentB/>
    </Provider>
  </Suspense>
)

节点：v16.14.2 反应：v18 反应路由器：v6

Redux v8 不支持 React v18 https://github.com/reduxjs/react-redux/issues/1740

【问题讨论】：

标签： reactjs react-redux react-router

【解决方案1】：

我也遇到了类似的问题，添加一个父 Suspense 为我解决了这个问题。像这样的：

<Suspense fallback={<Loader />}>
  <Component>
    <Suspense fallback={<Loader />}>
      <LazyLoadedComponentA />
    </Suspense>
  </Component>
  <Component>
    <Suspense fallback={<Loader />}>
      <LazyLoadedComponentB />
    </Suspense>
  </Component>
</Suspense>

【讨论】：

组件 A 和组件 B 部署在单独的容器中。当您使用路由器时，上述方法将不起作用。