如何使用react async在虚拟ui网格列表中添加虚拟化？

Question

我在应用程序中使用React Material ui，但是我的react代码发现了一些缺少的逻辑。

let nums = Array.from(Array(30).keys());

 <GridList cols={3}>
  {nums.map(n => {
    return (
      <GridListTile key={n}>
        <RecipeReviewCard key={n} num={n} />
      </GridListTile>
    );
  })}
</GridList>

行在网格列表中显示了静态卡，我想自动增加网格卡（使用虚拟化），但是我是React的新手。我应该在我的代码中做什么？

我从这里获取了网格列表卡的示例代码： https://material-ui.com/api/grid-list/

使用

构建的应用程序

{
"react": "16.12.0", 
"react-dom": "^16.12.0", 
"react-redux": "^7.1.3",
"redux": "^4.0.4"
"@material-ui/core": "^4.7.2"
}

容器使用react组件，它只是重复一张Card。

输出：“网格列表”显示30张静态卡，但网格列表应自动增加，并在垂直滚动条上显示更多卡。

我试图遵循指南并查找示例实现，但无法解决问题。