问题标签 [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.
javascript - 将 props 传递给实现 react suspense 的 axios hook
我一直在尝试创建一个获取数据并利用react suspense的钩子。使用页面中的示例(和本文),我创建了一个获取数据的函数(我想将其转换为挂钩)。
例子
问题
目前我无法通过函数传递数据,因为它在被调用时被执行。我想传入数据useWrap(**HERE**)
并在其中使用它fetchData()
预期行为/目标
- 我想将数据传递给 useWrap() 并将其放入 fetchData()
- 我希望 useWrap 成为一个 Hook,以便利用基本的钩子
- 我想利用 React Suspense
有人知道如何满足这些需求并告诉我我做错了什么吗?
谢谢!
reactjs - React Suspense 没有按预期工作
我想在我Powers
被获取/未定义时呈现后备组件。我React.Suspense
使用代码在我的逻辑中实现:
我RoutesPowers
的是
但它给了我Cannot read property "map" of null
可能是因为它powers
是空的。这意味着它React.Suspense
不能正常工作。有人可以帮我吗?
reactjs - React Router 和 Suspense 的 404 路由问题
我正在尝试使用 React 16.12.0 中的延迟加载和 Suspense。我也在使用 React Router 5.1.2。
这是我第一次使用 Suspense,但我还没有找到合适的方法来加载 a404/NoMatch
而不会导致其他问题。
我的代码如下所示:
- 像这样写,
NoMatchPage
组件将永远不会显示。 - 写在 Suspense 中,作为最后一个子节点,将
NoMatchPage
在任何路由上渲染组件,放置在应该在该路径上渲染的组件之后。 - 写在 Suspense 上方,将
NoMatchPage
在任何路径上渲染组件,放置在应该在该路径上渲染的组件之前。
我已经检查了官方文档和很多实际示例,但我没有发现任何可以帮助我解决这个问题的东西。
javascript - React Suspense 延迟加载没有回退
我想延迟加载我的组件以减少我的初始包大小并使用反应路由器使用代码拆分即时获取组件。
但是,当使用 React Suspense 时,它们会强制您使用后备进行加载。
这行不通:
在我的情况下,我正在从服务器渲染 html,所以我不想使用微调器。
这会在我的屏幕上产生无用的闪烁!IE:
- Html 加载
- 占位符出现
- 路由的 PageComponent 被加载
- 我有自己的微调器,可以从页面组件中加载提要
在我的情况下,html 对应于被加载的反应组件。
是否有任何已知的黑客可以轻松解决此问题(除了为复制 html(!!)的任何路由创建加载程序,顺便说一下,这会使延迟加载无用)。
我对“强迫”我们添加一个加载器有点不满,我不理解强制执行的决定背后的逻辑。
reactjs - 如何将延迟加载应用于 react-router-dom?
我有一个包含两个页面的基本路由:home 和 about。我已经用 react.lazy 导入了这两个页面,并用一个悬念后备来包装它们。
主页加载良好,但是当我想导航到 /about 时,页面变为空白,控制台中没有任何错误。怎么会这样?
另外,如何在本地开发中看到 about 页面在调用之前未加载?
这是路线和代码:
谢谢!
javascript - 渲染时暂停,但当我使用 react-three-fiber 中的 useLoader 时未指定后备 UI
我正在尝试为我的 ThreeJS 对象使用纹理。我收到错误:
地球.js:
index.js:
reactjs - 如何检查来自 chrome 扩展工具的组件?
我正在开发一种 chrome 扩展形式的工具,该工具检查包装在 Suspense 组件中的组件的计时指标,以检查它们的暂停时间。这是我所指的一个例子。
但是,我在检查特定组件名称时遇到了麻烦。想知道是否有人可以建议一种检索组件名称的方法或方法。
reactjs - Suspense 数据获取中的 UseRef
我正在尝试使用实验性的新 React 功能Suspense 进行数据获取。
这是我的简单useApi
钩子(如果我正确理解 Suspense 的话)要么返回fetch
调用结果,要么抛出吊杆承诺。(稍微修改了记录的示例)
我正在使用这个钩子,就像这样:
它永远不会解决。
我认为问题在于它useRef
并没有像预期的那样工作。
如果我用随机值初始化 ref,它不会保留该值,而是用另一个随机值重新初始化:
抛出suspender
会导致useRef
每次调用都重新初始化,这有点奇怪。
如果我删除该行useRef
按预期工作,但显然 Suspense 不起作用。
我可以使它工作的另一种方法是,如果我在 React 之外使用某种自定义缓存,例如:
这也使它工作,但我宁愿使用 React 本身在缓存组件特定数据方面提供的东西。
我是否遗漏了一些关于useRef
应该如何使用或不应该使用 Suspense 的内容?
javascript - 了解 Suspense 和 React Hooks
我正在努力寻找使用Suspense和React hooks的问题。
下面的 React 代码有几个关键问题。
让我知道它们是什么。
我发现了两个关键问题。
- 滥用
setdata
依赖useEffect
数组 - 没有提供
suspense
fallback
道具。
我认为仍然存在一个关键问题。
一件奇怪的事情是为什么userId
需要包含在依赖数组中。
javascript - 保持当前页面呈现,直到使用 React.lazy 和 React.Suspense 加载新页面
我正在使用 React 路由器根据特定的 url 呈现我的不同页面。不,我想使用React.lazy来延迟加载我所有的页面组件:
这项工作真的很好,但是当我去的时候/page
,我的所有东西都Home
消失了,我只看到了后备Loading page...
组件(页面消失了,然后另一个页面很快出现,这让用户感到不安)。
这是默认行为,React.Suspense
但在这种情况下,有没有办法让实际的主页在屏幕上呈现,消息在Loading page...
顶部,当Page
组件加载时,只呈现它并替换主页?