1

我在使用 redux 的 React 项目中使用 MUIDatatable。我在 api 调用期间显示了一个加载器，当 MUIDatatable 获取数据时，它第一次运行良好。但是当我从分页工具栏使用过滤器或更改页面时，我的加载器没有显示。我使用了一个 redux 设置，我的减速器返回状态loading: true并且在 api 调用之后它返回状态loading: false这完全没问题，但仍然没有显示加载器。我在使用加载器组件的地方使用了以下选项：

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}
/>
4

2 回答 2

0

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

{ 
   loading ?  <Loader loading={loading}/> :
   <MUIDataTable
      title={"Service Request List"}
      data={requests}
      columns={columns}
      options={options}
   />
}
于 2020-03-31T07:30:57.013 回答
0

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

<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',
        },
    }
}}
/>

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

至于您的解决方案，它可以完成这项工作，但是“一个不太理想的解决方案，因为它会导致整个表格在加载新数据时消失，例如异步分页、搜索，这会导致大量页面卡顿，因为表格消失并在每次新数据时重新出现已加载”

于 2020-11-16T17:10:25.030 回答