如何在反应中显示动态渲染的加载答案

【问题标题】：How to display loading on dynamic render in react如何在反应中显示动态渲染的加载
【发布时间】：2022-01-25 22:10:48
【问题描述】：

我想在动态渲染组件时添加一个加载部分。我的主组件是这样的

const [permisions, setPermisions] = React.useState([])
async function runCheck() {
    setPermisions([])
    // some logic to populate the permissions array        
}

const renderedUserPerms = Object.values(permisions).map((perms) => {
    return (
        <UserPerms {...perms} />
    )
})

而在组件的返回部分，是这样的：

<Grid
  container
  direction="row"
  justifyContent="center"
  alignItems="center"
  spacing={1}
>
   {renderedUserPerms}
</Grid>

我想在渲染发生时添加加载。根据代码可以知道权限数组的长度。

【问题讨论】：

标签： reactjs next.js loading

【解决方案1】：

这些信息不足以为您提供适当的解决方案，但我相信您正在尝试调用 API，然后根据 API 的响应更新您的状态。在这种情况下，您可以使用 Suspense 组件包装您的父组件。

  <Suspense fallback={<Spinner />}>
    <Grid
      container
      direction="row"
      justifyContent="center"
      alignItems="center"
      spacing={1}>
       {renderedUserPerms}
    </Grid>
 </Suspense>

在此处阅读更多信息https://reactjs.org/docs/concurrent-mode-suspense.html

【讨论】：