如何为从api获取数据的react组件创建加载程序页面

Question

Id想要创建一个加载程序组件，该组件在从API提取的数据被呈现之前显示在屏幕上。接收到的数据有许多链接，这些链接包括图片，当数据加载时，会有一瞬间没有显示图像，页面布局也会被破坏，所以我想创建一个组件，该组件会在页面上呈现，并在加载API的所有资产和数据时删除。IDK也许有更好的方法，我愿意接受任何建议。Ps：数据并不是同时加载的，所以在渲染整个页面之前渲染的加载页面是不起作用的，因为数据不是同时提取的。

我附上了一个组件，它显示了数据是如何被呈现到页面中的，它会动态地将卡片添加到页面中。我认为这是放置装载器微调器的最佳位置，直到所有资产都已装载

import AlbumCard from "../Cards/AlbumCard"
const AlbumsList = (props) => {
return (
<ul
style={{
position: "relative",
padding: "0",
display: "flex",
flexWrap: "wrap",
width: "100%",
}}
>
{props.item.map((item) => (
<AlbumCard
id={item.id}
key={item.id}
image={item.picture}
artist={item.name}
title={item.title}
/>
))}
</ul>
)
}
export default AlbumsList

Answer 1

我不确定我是否正确理解你，但也许这会对你有所帮助。

你应该做的第一件事是创建"；加载部件"；这将在获取数据时显示。例如，它可以是简单的微调器。

然后你可以这样实现：

const [loading, setLoading] = useState(false);
const fetchingFunction = () => {
setLoading(true); // setting loading to true
// simple example of fetch
fetch(SOME_URL)
.then(do something with your fetched data)
.then(() => setLoading(false)) // data is fetched so change loading to false
}
return (
{ loading ? <LoadingComponent /> : <ComponentThatShowsFetchedData /> } // loading is your state and we check if it's true then we render loading component but when it changes to false, then we render data