等待组件映射完成后再继续

Question

我们有一个组件，它执行映射循环来创建组件列表。这个组件列表中有一些昂贵的计算，因此需要一段时间才能创建。

当此映射完成创建所有组件时，尝试显示正在加载的组件。

我并不是在做一些异步调用来获取数据，等待它并显示/隐藏加载程序。

这只是组件在创建组件列表时需要花费时间来创建并显示加载程序。

我如何向这个加载程序展示，如何等待映射完成？尝试将其包装在Promise.all中，但它抱怨这不是有效的jsx。

import React from 'react';
const Main = ({items}) => {
const [isLoading, setIsLoading] = useState(true); 
/*
// can't do this. It would become an infinite spinner
if (isLoading) return <Loading />
*/
return (
<div>
<Component1 />
<Component2 />
<div>
{/* wait for this mapping to complete. Show a loader whiile it loads. setIsLoading(false) once done */}
{items.map((item, i) => (<ExpensiveComponent/>))} 
</div>
<Component3 />
<Component4 />
</div>
);
};
export default Main; 

Answer 1

如果这是您想要的，请告诉我。您可以添加一个函数来获取数据，同时设置加载状态。

const [loading, setLoading] = useState('not-loaded')
// Function
const getData = () => {
setLoading('loading')
someMethod.get(someData)
.then(() => { 
setLoading('loaded') 

// Do something

}) 
.catch(err => console.log(err))

}

然后在你的html 中

{loading === 'loading' && <Spinner />}
{loading === 'loaded' && <ExpensiveComponent />}