反应设置加载的最佳方式

Posted 2023-02-21

【中文标题】反应设置加载的最佳方式

【英文标题】：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 包裹在其中。

编辑了我的帖子，我面临的问题是它会渲染并关闭加载，然后一一渲染，但我希望它在加载后立即渲染数据。

"...让它加载，直到它完全获取所有数据..." 为了使这成为可能，数据获取本身需要有悬念集成。

【参考方案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- 在获取响应时调用成功操作和失败的错误操作案例

这将帮助您实现动态加载

快乐编码