React 18 - 传递状态变量进行延迟加载时无限渲染

Question

通过延迟加载使用 React 17，我根据所选语言（来自 zustand 商店的状态变量）动态加载三个组件之一。导入取决于该变量：

const MyComponent = lazy(() => import(`component-${language}.jsx`))

迁移到 React 18 后，该组件处于无限渲染状态。

我想这与新的自动批处理功能有关。

有人可以帮忙吗？此致

• 在组件外部创建一个函数，以从组件接收变量作为 prop 或从存储直接导入，但错误仍然存​​在。

• 我尝试使用商店的吸气剂而不是状态变量，但没有成功。

• 尝试使用 useState 和 useEffect 替换导入时的状态变量，但也没有成功。

Answer 1

无限加载是由于 React.lazy 下的 import 语句触发了组件的重新渲染。就我而言，我在 Suspenses 中调用惰性函数，这会触发无限循环，因为惰性函数每次都会导致重新渲染。

我通过将导入延迟调用移至与 Suspense 相同的组件中来修复此问题。

检查这里的沙箱

Answer 2

你可以试试这个

<React.Suspense fallback="..."><MyComponent /></React.Suspense>