问题标签 [react-suspense]

我正在使用 i18n，因此我的应用程序是多语言的。这似乎工作正常，除了当我测试应用程序时。

ProjectNavigation我渲染了一个在我的测试中命名的组件。该组件使用 useTranslation 挂钩来翻译我的项目导航栏中的一些单词。

当我渲染悬念时，唯一加载的是回退，当前设置为“正在加载...”。

我在渲染时尝试过 useSuspense={false}，但测试不会运行并且我收到此错误：

似乎该组件无法呈现，这就是它只显示回退的原因。任何人都知道如何处理无法渲染的组件？

我有一个需要与 Internet Explorer 11 兼容的 React 项目，在应用了一些兼容性 polyfill 后，我们仍然会收到错误消息。

SCRIPT1053：必须初始化常量

. 这似乎是由惰性函数引起的，但我在任何地方都找不到对此问题的任何参考。让我给你看一些代码：

应用程序.tsx

我们显然有比这更多的路线，如果我将 SandboxLazy 替换为 Sandbox 而没有惰性（包括它在项目中），一切正常。

这是我们的 webpack 和 babel 配置：

网页包：

通天塔：

有谁知道是什么问题？提前致谢

我正在玩 React 悬念示例。一切对我来说都是有意义的，除了我不知道如何隐藏执行的承诺。

在他们的示例中，每当fetchProfileData被调用时，promise 就会启动，并且由于状态最初是挂起的，因此它引起了 loader 的悬念。

但现在我把根放在哪里ProfileDetails。

假设我有一个应用程序，我只是做

我的问题是，什么时候在 React 中执行承诺？在我启动页面之后？如果是这种情况，我该如何防止它被执行。如果我不允许看到该页面。我是否执行以下操作？

这会奏效吗？我有严重的疑问。请帮忙。

在文档中它有这一行，但我不知道它是什么意思。

作为数据获取库的作者，您可以通过在不启动获取的情况下无法获取资源对象来强制执行此操作。此页面上使用我们的“假 API”的每个演示都会强制执行此操作。

当没有提供所需的React Suspense和回退并收到类似的错误A React component suspended while rendering, but no fallback UI was specified时，有没有办法找出错误的来源（我猜在内部抛出了一个承诺）？堆栈跟踪非常不明确，并没有真正提示哪个组件被挂起。

我有一个带有一系列嵌套<Suspense>组件的 React 版本 17 应用程序。每个都使用相同的<Loader>组件，其中包含一个 CSS 动画微调器：

当外部<Suspense>组件完成加载并交换<Loader>，<OuterWrapper>然后开始加载内部组件时，将在 DOM 中加载<Suspense>该组件的新实例。<Loader>正因为如此，动画在其动画循环开始时重新开始，这使得微调器看起来“卡顿”。

我尝试过 wrapping <Loader>，React.memo()但这并没有帮助，因为<Loader>组件的同一个实例实际上并没有被重新渲染，而是在 DOM 中被内部<Suspense>组件替换为全新的实例。我认为我需要在 DOM 中保持呈现相同的实例，以便动画看起来流畅。

解决这个问题的好方法是什么？我知道 React 版本 18 的实验性并发模式功能可以帮助解决这个问题，但我无法在这个应用程序中使用 React 的 alpha/beta 版本。

在下面的代码中，Sample使用一个async函数来获取一些数据。我将使用这些数据来更新 Redux 存储，以便任何组件都可以username在应用程序中访问它们。

在这里，让我们假设没有用户名我的应用程序无法继续。好吧，<Suspense>在父级别实现这一点，直到从资源中获取数据。但是，从 Redux 事件调度到<Sample>组件重新渲染之间存在细微差距，其中显示User:而不是loading....（事件不强制立即重新渲染，因此username为空）。所以我会以相同的顺序在网页中看到以下内容

loading....--> User:-->User: Srinesh

所以我的要求是在loading....商店更新之前显示。在网页上，我期待看到，

loading....-->User: Srinesh

有没有办法在不使用<Sample>组件级别的另一个条件来显示loading....用户名是否为的情况下实现这一点null？

我正在开发一个 React 应用程序，它使用react-router-dom与React.lazy()一起路由，并使用Suspense进行代码拆分。

这是相同的 gh-pages，每个人都有 404 错误问题，当我在此之前遇到它时，将 basename 属性添加到 BrowserRouter 组件将起作用。但是，即使添加了 basename prop，如果我去某个路线并刷新，也会出现 404 页面。此外，如果我直接通过浏览器访问路由，404 会再次出现。

我目前的解决方法是使用HashRouter而不是 BrowserRouter，它不会让应用程序在生产中中断。但是，它会将哈希值放入路由中。有没有人让 BrowserRouter 在 gh-pages 或任何其他部署服务上的部署中与 Suspense 一起使用？欢迎为应用程序提供更好的部署选项的建议。

这是我在代码中的路线和说明问题的示例：

在这里，如果我访问已部署的站点（例如 URL：.github.io/home），我会在 / 处看到主页。现在，如果一个链接将我带到 /carousel 路线，我可以看到轮播页面，但如果我刷新，就会出现 404 页面。另外，如果我直接访问 /carousel，则再次出现 404 页面。除了我已经在使用的 HashRouter 之外，我希望有一个解决方法。

我得到了一个项目来找出为什么下面的代码行不起作用。以下代码实现了 React Suspense API，但没有正确执行。这些组件如何利用 Suspense 和并发模式存在 3 个核心问题，这是我不熟悉的，即使在阅读文档后我仍然无法修复它

我正在现有样板之上构建一个新的 React 应用程序。它使用延迟加载，结合 React.Suspense。

问题是，就像在大多数 React 应用程序中一样，我需要在每次应用程序加载时从服务器获取一些初始元数据。我们称之为“getAppMetaData”。

那么问题是什么？问题是，虽然 getAppMetaData 处于待处理状态，但我需要提供一些加载器/微调器。这正是 React.Suspense 所做的：它显示了“后备”用户界面。当然，我可以运行一个单独的加载程序（实际上可以与备用 UI 相同），但这会产生 UX 问题，加载程序的动画在程序之间“重新启动”。

所以，问题是，我如何将其他异步操作“集成”到这个暂停中？简而言之：“我的后备 UI 已经显示，而块（来自延迟加载）已加载 - 那么我如何让它也等待 getAppMetaData？”

这是我的路由器：

React 文档指出，应该为此使用 Relay 库，但我不想为我的 API 调用使用任何特殊库，只是为了克服这个简单问题。它还指出：

如果我不使用中继怎么办？如果您今天不使用 Relay，您可能需要等待才能真正在您的应用中尝试 Suspense。到目前为止，这是我们在生产中测试并有信心的唯一实现。

我所需要的只是将一个小的初始 API 调用集成到这个过程中。如何做呢？任何建议将不胜感激。

上周我参加了一个 trihackathon，他们给了我们一个代码片段，询问代码中违反 React Suspense 原则的 3 个错误是什么。任何人都可以弄清楚吗？