问题标签 [react-suspense]

我有一个加载器组件，我希望它在我的页面呈现时出现。根据文档，当使用 suspense 我的代码应该是这样的

但我最终得到一个错误，上面写着

下一个/动态中的悬念选项使用无效。阅读更多： https ://nextjs.org/docs/messages/invalid-dynamic-suspense

我确定我遵循了文档中的说明，但我不确定为什么会出现这些错误。

在 .tsx 中，这按预期工作：

但是 .ts 中假定的等效项不起作用：

尝试呈现 SuspenseComponentTS 时的错误消息如下：

打印到控制台，它们似乎是等效的：

输出expect(SuspenseComponentTSX).toEqual("")：

输出expect(SuspenseComponentTS).toEqual("")：

我对反应中的代码拆分有疑问。假设您有一些名为 page1、page2 等的组件，并且还有一个 pages 文件，该文件使用React.lazy导出页面组件，并且您将 app 文件作为呈现这些页面的根组件。

页面文件：

应用程序文件：

当我在 react 中尝试这种设置时没有问题，并且 React 成功呈现页面并为所有页面创建多个块，但我不确定这种方法。我在代码拆分方面做得对吗？

在我的项目中，我使用 react-router 和 Suspence 来渲染多个惰性页面。LoadingSpinner 的唯一问题 id 是 Suspence 组件的后备道具，当您从一个页面转到另一个页面时，它仅加载 0.2 毫秒。这个持续时间很短，甚至肉眼都看不到

App.js 代码：

如何确保它具有最短持续时间？

您好，我想在页面加载时自动聚焦输入。我必须使用 Suspense，因为我使用的是 i18n。我有自动对焦代码，但效果不佳。

当我消除悬念时，我的代码运行良好。但我需要 i18n 的悬念。我怎样才能解决这个问题？

当尝试preload()为组件实现方法时React.lazy()，典型的模式看起来像，

以后可以使用，例如，

但是，第一个片段第 3 行的赋值会导致 TS 错误，

Property 'preload' does not exist on type 'LazyExoticComponent<T>'.

我一直在玩declare，但未能成功消除错误。该方法应该使用什么类型preload()？

如何检测应用程序中当前使用的 React（稳定/发布）版本是否支持并发模式？假设您正在编写一个库，该库应针对多个反应版本，并且仅在相关时才添加并发功能。

我正在做，return typeof React.useTransition === "function"但我对此犹豫不决。

提前致谢。

我正在尝试学习 React 18 中的一些新功能，例如SuspenseListand newuseId钩子，但我似乎一遍又一遍地遇到同样的错误：

这就是我的 package.json 的样子：

我现在不知道该怎么做，因为我已经安装了 React 18 的 RC 版本，根据工作组 GitHub 讨论板，它应该是最新的。

useTransition当从完成返回时，我希望能够改变我自己的状态。也就是说，目前，在下面的示例中，isPending从 true 切换到 false，但这还不够。我希望能够在该更改上执行代码。

也就是说，在下面的示例中，我希望可以做一些类似的事情useEffect，并在挂起的事件发生更改时从执行返回的代码startTransition，但这不起作用。

还有其他选择吗？

我有一个像这样结构的组件，我ErrorBoundary包装了我的Suspense元素。

该MyList组件包括一个SWR数据获取钩子，如下所示：

我的 fetcher 方法抛出如下错误：

当错误发生时，我不知道如何让我的 UI 显示抛出的值（即 MyError 类中的内容）