react-bootstrap-table-next远程过滤

Question

我尝试实现远程过滤（远程分页和排序已经很好地工作了），但是有一些麻烦。当我在过滤器中键入内容时：数据过滤在后端进行并作为过滤器返回，但是，如果我尝试单击下一页或尝试按列排序，则所有数据均加载为未过滤。问题是过滤器没有保存在前端，因此在单击功能（{新页或按列排序）后，在函数handleTableChange（在下面）中，filters属性始终设置为空。

我是否可能忘记在表定义中设置有关存储过滤器的属性？

行handleTableChange后的} else if (type === 'filter') {函数（在下面）中将FE部分的过滤处理

表定义看起来如下：

//...some code...
const RemoteAll = ({ data, page, sizePerPage, onTableChange, totalSize, columns }) => (
    <div>
        <BootstrapTable
            remote
            keyField='id'
            data={ data }
            columns={ columns }
            filter={ filterFactory() }
            pagination={ paginationFactory({ page, sizePerPage, totalSize }) }
            onTableChange={ onTableChange }
            sort={ { dataField: sortField, order: sortOrder }}
            options={tableOtions}
            noDataIndication={ () => <Loading/> }
        />
    </div>
);
//...some code...
//...and in render moethod:
<Tab eventKey={tab.id} title={tab.name}>
    <RemoteAll
        data={ this.props.locations.items ? this.props.locations.items : [] }
        page={ page }
        sizePerPage={ sizePerPage }
        totalSize={ this.props.locations.count }
        onTableChange={ this.handleTableChange }
        columns={ columns.find(el => el.id === tab.id) !== undefined 
            ? columns.find(el => el.id === tab.id).items 
            : columns[0].items
        }
    />
</Tab>
//...some code...

函数handleTableChange：

//...some code...
handleTableChange = (type, { page, sizePerPage, filters, sortField, sortOrder, cellEdit }) => {
    const currentIndex = (page - 1) * sizePerPage;
    setTimeout(() => {
        if (type === 'pagination') {
            this.props.getLocations(
                page, 
                sizePerPage, 
                this.state.key, 
                sortField, 
                sortOrder, 
                sortField ? sortField.split('-').length > 0 : false,
                this.state.filters ? this.state.filters : filters);
            let result = this.props.locations.items;
            this.setState({
                page: page,
                data: result.slice(currentIndex, currentIndex + sizePerPage),
                totalSize: this.props.locations.count,
                sizePerPage
            });
        } else if (type === 'sort' && (sortField !== this.state.sortField || sortOrder !== this.state.sortOrder) && 
                !this.props.locations.isFetching) {
            this.props.getLocations(
                page, 
                sizePerPage, 
                this.state.key, 
                sortField, 
                sortOrder, 
                sortField ? sortField.split('-').length > 0 : false,
                this.state.filters ? this.state.filters : filters);
            this.setState({
                sortField: sortField,
                sortOrder: sortOrder
            });
        } else if (type === 'filter') {
            let new_filters = this.state.filters ? this.state.filters : filters;
            this.props.getLocations(
                page, 
                sizePerPage, 
                this.state.key, 
                sortField, 
                sortOrder, 
                sortField ? sortField.split('-').length > 0 : false,
                filters);
            this.setFilter(filters)
            this.setState({
                filters: new_filters.length !== filters.length ? filters : this.state.filters
            })
        }       
    }, 100);
}
//...some code...