反应设置加载的最佳方式答案

【问题标题】：react best way to set a loading反应设置加载的最佳方式
【发布时间】：2021-08-24 04:28:24
【问题描述】：

我使用React.lazy 和Suspense 来设置加载。

const LazyComponent = React.lazy(() => {
  const x = new Promise((resolve) => {
    setTimeout(() => {
      return resolve(import("../Components/ListContainer"));
    }, 3000);
  });
  return x;
});

function Home() {
  return (
    <> 
      <Suspense fallback={<Loading />}>
        <LazyComponent />
      </Suspense> 
    </>
  );
}

在我的代码中，我将超时设置为3000，但我的目标是让它加载，直到它完全获取所有数据，然后一次呈现所有数据。

有没有办法做到这一点？或者有没有更好的方法来设置加载？

【问题讨论】：

AFAIK Suspense 应该已经处理了这个问题，只要孩子有一个 React.lazy 包裹在其中。
编辑了我的帖子，我面临的问题是它会渲染并关闭加载，然后一一渲染，但我希望它在加载后立即渲染数据。
"...让它加载，直到它完全获取所有数据..." 为了使这成为可能，数据获取本身需要有悬念集成。

标签： reactjs react-hooks react-suspense

【解决方案1】：

您需要动态处理加载，而不是给出 setTimeout 的固定值。

>您可以按照以下步骤操作：

1- 为每个网络调用创建 3 个操作：如 getDataPending、getDataSuccess、GetDataError

2- 在 getDataPending 操作中放入 loading=false

3- 在 getDataSuccess 操作中放入 loading=true 并设置 Error=false

4- 在 getDataSuccess 操作中放入 loading=true 并设置 Error=true

5- 现在在网络调用之前调用 getDataPending

6- 在获取响应时调用成功操作和失败的错误操作案例

这将帮助您实现动态加载

快乐编码

【讨论】：