reactjs - 如何在antd中将加载器放入嵌套表中？

Question

我在 antd 中有一个嵌套表，其中当我单击一行时，它会展开并打开一个新表。此处说明 .

但是获取嵌套表的数据需要一些时间(我通过 API 获取)。我需要在嵌套表中放置一个加载器/旋转器以指示数据仍然无法显示。我怎样才能在antd中实现这一点？

我尝试执行以下操作，但没有成功:

//(Outer table) 
<Table key="campaignListByDate-table" 
    columns={campaignDateColumns}
    expandable={{ expandedRowRender }}
    loading={{
     indicator: <div><Spin /></div>,
     spinning: !campaignList
    }}
    dataSource={campaignList} 
    />

//Inner table ( The one that opens when u click on the "+" sign of a row. 

<Table 
  columns={columnsExpanded}
  dataSource={emailRate} 
  pagination={false} 
  loading={{
    indicator: <div><Spin /></div>,
    spinning: !emailRate
 }}/>

CampaignList: 
[
    {
        "id": "27813f63-aee2-4c69-bf5d-9e4ac8",
        "name": "bnce",
        "templateId": "ae7e094f-1735-4a31-bc67-95bd3d",
        "userId": "3122be78-703d-4621-92f0-8a2bd8",
        "createdAt": 1604984929337,
    },
    {
        "id": "438e0cd9-a550-453a-8a5b-4bd37",
        "name": "asd",
        "templateId": "ae7e094f-1735-4a31-bc67-95bd3",
        "userId": "3122be78-703d-4621-92f0-8a2bd87",
        "createdAt": 1604985347370,
    },

]

EmailRate: 
[
    {
        "time": "2020-11-11 11 : 39",
        "count": 3,
        "key": "2020-11-11 11 : 39"
    }
]

Answer 1

根据您的代码，我假设您在没有任何数据时尝试将 ![ ] 设置为旋转。但是 ![ ] 不会返回 true。

示例:

//When you have some data
console.log(!['something to avoid empty array'])

//when you do not have any data
console.log(![])

这两种情况都会返回 false，并且您的加载程序不会被激活。

尝试使用 bool 状态变量，并在数据获取之前和之后为这些变量分配 true 和 false，并将其分配给表格微调器