Reactjs 如何使用材质ui骨架组件在react中的循环数组上显示多个加载骨架屏幕？

我正在处理react项目，该项目通过API端点获取数据。我正在为UI组件使用材质UI。我想从MaterialUI实现骨架组件，以便在等待从后端获取数据时显示加载

问题是，我可以在获取数据时显示骨架，但我想显示要为循环通过的数组中的所有项显示的骨架组件

这是在做什么

这是我想要的

如果api返回包含六个对象的数组的响应，我想在屏幕上显示六次骨架加载组件

---

如何才能做到这一点。

拥有框架的想法是让用户预览获取数据时UI的外观，从而提供良好的用户体验

但是UI怎么知道我们需要渲染6个骨架呢。这些信息必须来自API。但是，当您执行类似于

response.data.length

的操作来确定大小时，UI中已经有了响应。当您已经有响应时，为什么要显示

骨架

？。因此，我们不应该把重点放在骨架长度与你的反应长度的匹配上。只需渲染在UI中看起来不错的骨架

 if (loading) {
    return <ListSkeleton listsToRender={8} />; // pass the no you want as a prop
  }  

if（加载）{
return；//将所需的no作为道具传递
}  

列表骨架

 const ListSkeleton = ({listsToRender}) => {
  return (
    <>
      {Array(listsToRender)
        .fill(1)
        .map((card, index) => (
           // render your skeleton here
        ))}
    </>
  );
};

 

const ListSkeleton=（{listsToRender}）=>{
返回(
{数组（listsToRender）
.填写（1）
.map（（卡片、索引）=>(
//在这里渲染骨架
))}
);
};