reactjs - 即使表格由数据填充，Ant Design 表格仍继续显示加载

Question

我在我的前端项目中使用 Ant 设计。我有一个表组件，它由来自 API 的数据填充。获取数据需要一些时间，所以我想显示一个加载微调器。

<Table
  columns={queueColumns}
  dataSource={queueData}
  loading={{ indicator: <div><Spin /></div>}} 
/>

我的问题是，即使在表中加载了数据后，我的表仍继续显示加载微调器。

当表格充满数据时，如何让微调器消失？

我怀疑我需要在 Table 组件的 loading prop 中添加条件。但我不确定该怎么做

---

编辑:我正在像这样获取数据:

    const [queueData, setQueueData] = useState('');

    useEffect(() => {        
        var config = {
          method: 'GET',
          url: '/api/queues',
          headers: { 
            'Content-Type': 'application/json'
          }
        };
        axios(config)
        .then(function (response) {
            setQueueData(response.data)
        }) 
      }, [])

Answer 1

不幸的是，缺少 Ant 的文档 Table零件。要指示您的表是否正在加载，您可以传递 loading={true}或 loading={false} .要设置自定义微调器，您可以设置 loading={{indicator: <MyBeautifulSpinner/>, spinning: true/false}} .那spinning属性表示表是否处于加载模式。您需要有一个状态，该状态在获取数据后会发生变化。看 Ant 的 table 更多loading :

https://github.com/ant-design/ant-design/blob/master/components/table/Table.tsx#L457