组件在响应同步输入时挂起

Question

错误：组件在响应同步输入时挂起。这将导致 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 React：v18 React 路由器：v6

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

Answer 1

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

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