问题标签 [react-suspense]

我有一个组件，它通过<Suspense />. 当这个组件挂载时，fetchQuery会通过useEffect钩子触发请求，如下所示：

并getFoo()调用fetchQuery：

出于某种原因，Suspense 仅在getFoo被触发时显示加载器，fetchFoo并停止显示加载器而不等待fetchFoo完成。

如何让 Suspense 等待fetchFoo完成？

我不确定如何修改useEffect函数（或使用 React 的新Suspense组件）以在渲染组件之前等待所有数据加载。

下面是从 Flask 后端引入数据的代码：

这是 console.log 的 JSON 代码：

<p>Data: {console.log(props.data)}</p>

这将在控制台中返回 JSON：

尝试时<p>Data: {console.log(props.data.content.user_data[1])}</p>，它返回错误Can't find property user_data of undefined.

我尝试通过将Suspense组件包装在 React 中来使用新组件return，但我仍然收到相同的错误。

任何帮助表示赞赏，谢谢。

在这个页面中，他们使用SuspensewithReact.lazy来延迟加载组件。但是，正如他们在此处Suspense指出的那样，它本身被列在Conccurrent mode尚未稳定的实验中。我不明白。我可以在生产中使用吗？Suspense

（简化示例）：我有 ComponentA和 Component B，它们是兄弟组件，并且都在 App.js 中延迟加载：

是否可以在加载B时A加载（基本上何时someCondition为真），而不必在B以后渲染？这样，组件的加载是分组的，我的网站可以在第一次延迟加载后不中断。

先感谢您！如果有人有解决方案，我会将他们的答案标记为正确。

假设我有一个如下所示的设置：

在开发过程中是否有一种简单的方法可以触发<SomeComponent />暂停一段时间，以便我可以看到回退状态的样子？

我想要这个，因为我试图确保我的后备状态看起来都正确，并且到非后备状态的转换看起来不卡顿。我希望有一种解决方案可以使组件在 Javascript 端以编程方式挂起。

基本上我试图在 React 中渲染一个非常长的列表（可能是异步的），我只想向上和向下渲染可见条目±10。

我决定获取保存列表的组件的高度，然后计算整体列表高度/行高，以及滚动位置来决定用户滚动的位置。

在下面的例子中，SubWindow是一个可以容纳列表或图片等的通用组件......因此，我认为它不是计算的最佳位置。相反，我将 calc 移动到不同的组件并尝试使用 ref 代替

问题：在BananaWindow中，useEffect仅在初始安装和绘画时触发。所以我最终只得到offsetWidth了占位符。当内容加载完成useEffect时， 什么都不做。SubWindow

更新：尝试使用回调参考，它仍然只显示占位符的高度。尝试调整观察者的大小。但真的希望有一个更简单/开箱即用的方法......

我正在使用 react-18next 在整个反应应用程序中加载翻译。我在让我的应用程序等待翻译时遇到问题。这打破了我们在 Jenkins 中的测试，因为他们在许多情况下都在搜索已翻译的密钥。

i18n.tsx：

注意：我尝试使用 Suspense 以及不使用 Suspense，useSuspense 标志与尝试匹配（Suspense 为 true/default）。

尝试准备好：

有悬念的尝试：

这两个版本似乎都不适合我，我可以看到翻译键显示片刻。我是否需要更深入，直到实际写出翻译而不是传递给下一个道具或我犯的错误是什么？我没有使用 next.js 进行构建/部署。我更喜欢 app.tsx 中的全局解决方案。

假设fetchUserProfile在别处定义。使用有什么问题Suspense吗？

我懒加载一个带有懒惰和悬念的组件。它有效，但过渡非常原始。有没有一种简单的方法来应用平滑过渡而不用关键帧不透明动画包装每个暂停的组件（在每次重新渲染时它会再次触发，我不想要这个。只有在组件准备好显示时才进行过渡） ?

基本代码：

我正在尝试为我的 reactjs 应用程序添加一个悬念，但出现此错误。不太确定我做错了什么。它看起来像我以前使用过的 Suspense，但这次它出错了。我不确定它是否与 index.js 文件有关，但如果需要回答问题，我会很乐意发布