在MUIDatatable中进行分页或筛选时，加载程序未显示

Question

我在使用redux的React项目中使用MUIDatatable。我在api调用期间展示了一个加载器，当MUIDatatable获取数据时，它第一次运行良好。但当我使用过滤器或从页面工具栏更改页面时，我的加载程序不会显示。我使用一个redux设置，其中我的reducer返回状态loading:true，在api调用后返回状态loading:false这完全可以，但仍然没有显示loader。我在使用加载器组件时使用了以下选项：

const options = {
filterType: 'dropdown',
responsive: 'scrollFullHeight',
serverSide: true,
count: total,
page: page,
searchText: tableState.options.searchText,
customToolbarSelect: renderCustomSelectToolbar,
textLabels: {
body: {
noMatch: loading ?
<Loader loading={loading} /> :
'Sorry, there is no matching data to display',
},
}
};

然后我在我的MUIDatatable中使用了这个选项，比如：

<MUIDataTable
title={"Service Request List"}
data={requests}
columns={columns}
options={options}
/>

Answer 1

带有状态的选项应直接在组件道具中指定：

<MUIDataTable
title={"Service Request List"}
data={requests}
columns={columns}
options={{
filterType: 'dropdown',
responsive: 'scrollFullHeight',
serverSide: true,
count: total,
page: page,
searchText: tableState.options.searchText,
customToolbarSelect: renderCustomSelectToolbar,
textLabels: {
body: {
noMatch: loading ?
<Loader loading={loading} /> :
'Sorry, there is no matching data to display',
},
}
}}
/>

这会奏效的。当在变量中指定具有自定义状态的选项时，它不起作用。

至于你的解决方案，它起到了作用，但"；这是一个不太理想的解决方案，因为它导致在加载新数据时整个表消失，例如异步分页、搜索，这会导致大量的页面jank，因为每次加载新数据都会出现大量的页面；

Answer 2

我找到了我的解决方案。我们需要使用如下加载道具和三元运算符：

{ 
loading ?  <Loader loading={loading}/> :
<MUIDataTable
title={"Service Request List"}
data={requests}
columns={columns}
options={options}
/>
}