javascript - React Material UI 在等待数据时在表中显示进度

Question

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

就目前情况而言，表格显示没有可显示的记录 ....直到服务器返回数据。

========= 进一步@torquan 的回复，这对我来说更详细。

const [dataFetched, setDataFetched] = useState(false)

将 EmployeesTable 转换为组件 - 然后我必须传入 props，它工作得很好。

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

Answer 1

您可以显示一个微调器，直到获取数据为止。

该部分可能如下所示:

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

您可以使用<Spinner />例如，从 npm 上的库之一或编写您自己的库。

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