问题标签 [react-suspense]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
494 浏览

javascript - 将 props 传递给实现 react suspense 的 axios hook

我一直在尝试创建一个获取数据并利用react suspense的钩子。使用页面中的示例(和本文),我创建了一个获取数据的函数(我想将其转换为挂钩)。

例子

在代码沙盒上

问题

目前我无法通过函数传递数据,因为它在被调用时被执行。我想传入数据useWrap(**HERE**)并在其中使用它fetchData()

预期行为/目标

  1. 我想将数据传递给 useWrap() 并将其放入 fetchData()
  2. 我希望 useWrap 成为一个 Hook,以便利用基本的钩子
  3. 我想利用 React Suspense

有人知道如何满足这些需求并告诉我我做错了什么吗?

谢谢!

0 投票
1 回答
2197 浏览

reactjs - React Suspense 没有按预期工作

我想在我Powers被获取/未定义时呈现后备组件。我React.Suspense使用代码在我的逻辑中实现:

RoutesPowers的是

但它给了我Cannot read property "map" of null可能是因为它powers是空的。这意味着它React.Suspense不能正常工作。有人可以帮我吗?

0 投票
2 回答
493 浏览

reactjs - React Router 和 Suspense 的 404 路由问题

我正在尝试使用 React 16.12.0 中的延迟加载和 Suspense。我也在使用 React Router 5.1.2。

这是我第一次使用 Suspense,但我还没有找到合适的方法来加载 a404/NoMatch而不会导致其他问题。

我的代码如下所示:

  • 像这样写,NoMatchPage组件将永远不会显示。
  • 写在 Suspense 中,作为最后一个子节点,将NoMatchPage在任何路由上渲染组件,放置在应该在该路径上渲染的组件之后。
  • 写在 Suspense 上方,将NoMatchPage在任何路径上渲染组件,放置在应该在该路径上渲染的组件之前。

我已经检查了官方文档和很多实际示例,但我没有发现任何可以帮助我解决这个问题的东西。

0 投票
2 回答
6464 浏览

javascript - React Suspense 延迟加载没有回退

我想延迟加载我的组件以减少我的初始包大小并使用反应路由器使用代码拆分即时获取组件。

但是,当使用 React Suspense 时,它​​们会强制您使用后备进行加载。
这行不通:

在我的情况下,我正在从服务器渲染 html,所以我不想使用微调器。
这会在我的屏幕上产生无用的闪烁!IE:

  • Html 加载
  • 占位符出现
  • 路由的 PageComponent 被加载
  • 我有自己的微调器,可以从页面组件中加载提要

在我的情况下,html 对应于被加载的反应组件。

是否有任何已知的黑客可以轻松解决此问题(除了为复制 html(!!)的任何路由创建加载程序,顺便说一下,这会使延迟加载无用)。

我对“强迫”我们添加一个加载器有点不满,我不理解强制执行的决定背后的逻辑。

0 投票
0 回答
953 浏览

reactjs - 如何将延迟加载应用于 react-router-dom?

我有一个包含两个页面的基本路由:home 和 about。我已经用 react.lazy 导入了这两个页面,并用一个悬念后备来包装它们。

主页加载良好,但是当我想导航到 /about 时,页面变为空白,控制台中没有任何错误。怎么会这样?

另外,如何在本地开发中看到 about 页面在调用之前未加载?

这是路线和代码:

谢谢!

0 投票
1 回答
3851 浏览

javascript - 渲染时暂停,但当我使用 react-three-fiber 中的 useLoader 时未指定后备 UI

我正在尝试为我的 ThreeJS 对象使用纹理。我收到错误:

地球.js:

index.js:

0 投票
1 回答
52 浏览

reactjs - 如何检查来自 chrome 扩展工具的组件?

我正在开发一种 chrome 扩展形式的工具,该工具检查包装在 Suspense 组件中的组件的计时指标,以检查它们的暂停时间。这是我所指的一个例子。

但是,我在检查特定组件名称时遇到了麻烦。想知道是否有人可以建议一种检索组件名称的方法或方法。

0 投票
2 回答
754 浏览

reactjs - Suspense 数据获取中的 UseRef

我正在尝试使用实验性的新 React 功能Suspense 进行数据获取

这是我的简单useApi钩子(如果我正确理解 Suspense 的话)要么返回fetch调用结果,要么抛出吊杆承诺。(稍微修改了记录的示例

我正在使用这个钩子,就像这样:

它永远不会解决。

我认为问题在于它useRef并没有像预期的那样工作。

如果我用随机值初始化 ref,它不会保留该值,而是用另一个随机值重新初始化:

抛出suspender会导致useRef每次调用都重新初始化,这有点奇怪。

如果我删除该行useRef按预期工作,但显然 Suspense 不起作用。

我可以使它工作的另一种方法是,如果我在 React 之外使用某种自定义缓存,例如:

这也使它工作,但我宁愿使用 React 本身在缓存组件特定数据方面提供的东西。

我是否遗漏了一些关于useRef应该如何使用或不应该使用 Suspense 的内容?

复制:https ://codesandbox.io/s/falling-paper-shps2

0 投票
2 回答
2584 浏览

javascript - 了解 Suspense 和 React Hooks

我正在努力寻找使用SuspenseReact hooks的问题。

下面的 React 代码有几个关键问题。

让我知道它们是什么。

我发现了两个关键问题。

  • 滥用setdata依赖useEffect数组
  • 没有提供suspense fallback道具。

我认为仍然存在一个关键问题。

一件奇怪的事情是为什么userId需要包含在依赖数组中。

0 投票
1 回答
1373 浏览

javascript - 保持当前页面呈现,直到使用 React.lazy 和 React.Suspense 加载新页面

我正在使用 React 路由器根据特定的 url 呈现我的不同页面。不,我想使用React.lazy来延迟加载我所有的页面组件:

这项工作真的很好,但是当我去的时候/page,我的所有东西都Home消失了,我只看到了后备Loading page...组件(页面消失了,然后另一个页面很快出现,这让用户感到不安)。

这是默认行为,React.Suspense但在这种情况下,有没有办法让实际的主页在屏幕上呈现,消息Loading page...顶部,当Page组件加载时,只呈现它并替换主页?

编辑happy-cohen-z60b9