时间戳

首页 > 解决方案 > 反应设置加载的最佳方式

reactjs - 反应设置加载的最佳方式

问题描述

我正在使用React.lazywithSuspense来设置加载。

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，但我的目标是让它加载，直到它完全获取所有数据，然后一次呈现所有数据。

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

标签： reactjsreact-hooksreact-suspense

解决方案

您需要动态处理加载，而不是给出 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-在获取响应时调用成功操作和失败的错误操作案例

这将帮助您实现动态加载

快乐编码

推荐阅读