React Material UI 在等待数据时在 Table 中显示进度

Question

我知道可以在尚未填充的 table 上显示循环进度。你是怎么做到的？

就目前而言，table 显示 没有要显示的记录 .... 直到服务器 returns 与数据。

========= 对@torquan 的回应更进一步，这是对我有用的更详细的内容。

const [dataFetched, setDataFetched] = useState(false)

将 EmployeesTable 转换为一个组件 - 然后我必须传递 props 并且它完美地工作。

         {!dataFetched ? (
            <CircularProgress />
         ) : (
            <EmployeesTable
               data={employees}
               token={token}
            />
         )}

Answer 1

您可以在获取数据之前显示微调器。

那部分可能是这样的：

<table>
  {!dataFetched ? <Spinner /> : <YourTableBody>}
</table>

例如，您可以使用 npm 上某个库中的 <Spinner /> 或自己编写。

您可以将 dataFetched 初始化为 false，并在 API 调用完成后将其设置为 true。如果这太笼统，您应该 post 您的 table.

代码

React Material UI 在等待数据时在 Table 中显示进度

React Material UI show progress in Table while waiting on data

javascript

progress-bar

reactjs

material-ui

react-redux