问题标签 [react-suspense]

我知道 React suspense 是新的，还没有正式发布生产，但我想知道它的主要好处是/或使用它会是什么？

我看不出它所做的任何事情都是“新的”或替换不存在的东西？

我知道它允许我从上到下加载东西，但无论如何我都可以使用我自己的组件做出反应

谁能给我一些关于它可能有什么好处的想法？

我的 App.js 文件中有以下代码，如果他们有权这样做，则想法是延迟加载元素：

当我运行此代码时，我收到以下 React 错误：

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：对象。

有没有人对如何解决此错误有任何想法？它与延迟加载库有关吗？

任何想法或帮助将不胜感激。

谢谢。

我不得不用悬念和 react.lazy 打破我的一些路线，以确保我的捆绑文件不荒谬。但是这样做之后，我的第一个悬念括号之后的路线不再起作用了？

在下面的示例中，链接 1 - 6 的路由正常工作（没有问题，并且它们正确呈现）。但是 Suspense 内部的组件和它之后的所有组件（悬念内部和外部）都没有正确加载。您转到该路线，页面上没有任何内容。甚至 Spinner 组件也不会作为后备加载。我已经尝试删除微调器组件作为后备组件，然后只是进行加载......即使这样也不会出现在页面上。

我的进口声明：

我的组件导入结构示例：

（我的路由树示例）

编辑：展示我修复它的方式。

Here I am having 4 components, where I am rendering all these four components in App.js. These four components individually hitting different APIs. So one component may render faster and others may render slower. What I am trying to achieve here is I need to show a loading indicator, till all components are rendered. I tried that using React Lazy loading and Suspense but no luck. Please help me with this. Here I am sharing the code of what I have done. Thanks in advance.

code:

最近我学习了 react-redux，我用它来管理我的网站中的状态。但我发现对 react suspense 有一些兴趣，但似乎 suspense 是一个杀死 redux 的功能。（也许）如果一起使用可能会导致问题。

例如，如果我想执行异步更改状态并更新存储。我应该在哪里应用悬念“功能”和 redux 商店更新。

我知道我的问题有点令人困惑，但我希望你能理解我所说的。

如果我想使用 React suspense，任何人都知道如何在 React SAP 中管理状态？只有usecontext可用吗？

我正在学习 React，并尝试使用 Suspense。

首先，我尝试使用包装好的 Promise 对象作为道具。
包装器在未解决时抛出承诺。它永远循环。
然后我用useEffect尝试它，但它有同样的问题。

这是我的代码和沙箱。请教我如何解决这个问题。

textsandbox EternalLoop
* useEffect 块注释在沙盒中被淘汰，因为它永远循环。

我有一个提供程序，它在加载（一次）时会做一些工作。它为地图添加脚本标签，然后在加载该脚本时初始化地图。

我希望孩子们能够使用悬念。我想从那个提供者那里返回一个承诺，如果没有解决（为了悬念）或者它返回地图。

我无法弄清楚如何在我的组件中执行此操作。值得注意的是，我使用的是 nextJS，所以我必须确保我也在客户端。

我做了一个代码沙箱来简化它：

Child 使用地图并显示它，在这种情况下它只是文本：

这是提供者：

我有一个使用 MUI 的反应应用程序，现在我已经用一个微调器实现了悬念，它在加载内容时作为后备组件启动。我很想为后备组件添加淡入/淡出过渡，因为此时更改太突然了。

我的设置（对于这个特定问题的相关部分）如下：

依赖项

路由器块

这是应用程序的主路由，它有一个RouteWithSubRoutes组件接收路由作为参数并渲染react-render-dom路由组件，但基本上充当路由切换容器

SuspenseLoader 组件详解

就像现在一样，它是一个居中的 MUI 循环进度（Spinner），带有覆盖整个应用程序的白色背景

我已经阅读了有关 React.Suspense 的文档，它看起来很棒，但是如何在执行 api 调用时使用它，例如使用 axios？

更具体地说，为什么这段代码不起作用？

谢谢！

例如我有这个声明：

场景一：

ComponentA如果 的加载依赖关系仅为 1 ，则这种情况很好。

但是对于场景 2：如果我有多个依赖项ComponentA怎么办？

代码 2

可以将每个依赖项的 Suspense 声明分开吗？像这样：

代码 3

然后我将删除路由器文件中的 Suspense 声明...

我的问题是可以有像代码 3这样的结构，因为我想在每个依赖项中有多个单独的加载指示器？

由于我正在对每个依赖项进行代码拆分，因此这种方法是否有任何缺点，例如每个子组件中的性能或多个请求？