渲染时暂停了一个React组件，但未指定备用UI

Question

我刚刚开始研究这个新的React应用程序。

它<Suspense />在组件中使用元素，但我将其删除。然后应用程序因上述错误而崩溃。

是否有任何简单的解决方法，却不了解太多<Suspense />？

Answer 1

您有 2 个选择：

1. 无需使用悬念，您可以像这样配置 i18n.js：

   i18n
     .use(XHR)
     .use(LanguageDetector)
     .init({
       react: { 
         useSuspense: false //   <---- this will do the magic
       }
   });
   

2. 使用 Suspense，例如：

   i18n
     .use(XHR)
     .use(LanguageDetector)
     .init({
       react: { 
         useSuspense: false //   <---- this will do the magic
       }
   });
   

Answer 2

删除React.lazy不是一个好主意。因为如果您的应用程序增长，加载主页将花费太多时间。

对于react-router v6+，我们有以下内容：

<Route path="about" element={
  <React.Suspense fallback={<>...</>}>
    <About />
  </React.Suspense>
} />

Answer 3

我知道这不完全是@IshanPatel 的问题，但可能导致此错误消息的原因是，如果您直接在函数 hold 内使用像 useTranslation() 这样的钩子。解决方案是将该代码简单地移动到一个单独的函数中，并在那里放置钩子（见截图）。

这首先出现在谷歌上，我想有人可能会浪费很长时间寻找修复，所以我想把它作为评论分享。

Answer 4

为了解决此问题而不放Suspense回去，您需要摆脱的用法React.lazy。