设置负载的最佳反应方式

Question

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

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

Answer 1

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

>以下是您要执行的步骤：

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

2-在getDataPending操作中，putloading＝false

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

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

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

6-在获得响应时调用成功操作和失败的错误操作情况

这将帮助您实现动态加载

快乐涂层