React table - 在手动分页中强制重置页面索引

Question

我在手动重置页面索引时遇到问题

我手动处理来自 onPageChange 、onPageSizeChange ... 等

的数据更改

当我使用 onPageChange 更改页面索引时，我存储在高级组件中并再次传递 ReactTable 作为名为 currentPage 的 prop 在相同情况下我需要将 currentPage 重置为 0 ，但是 dosent 有效所以我添加了componentDidUpdate 强制重置页面索引的回调

ReactTable 版本 6.11.5

componentDidUpdate(prevProps, prevState) {
    const reactTable = this.myRef.current;
    const { currentPage } = this.props;
    if (reactTable && currentPage !== reactTable.state.page) {
      reactTable.state.page = currentPage;
      reactTable.getResolvedState().page = currentPage;
    }
  }

render() {
    const {
      data,
      loading,
      totalNumberOfPages,
      currentPage,
      onPageChange,
      pageSize,
      onPageSizeChange,
      onFilteredChange,
      onSortedChange,
      filtered,
    } = this.props;
 return (<ReactTable
            ref={this.myRef}
            filtered={filtered}
            onFilteredChange={(filtered) => {
              onFilteredChange(filtered);
              this.setState({ filtered });
            }}
            manual
            sorted={tableSorted}
            onSortedChange={(sorted) => onSortedChange(sorted)}
            filterable
            loading={loading && !silentUpdate}
            pages={totalNumberOfPages}
            page={currentPage}
            onPageChange={onPageChange}
            defaultPageSize={pageSize}
            pageSize={pageSize}
            onPageSizeChange={onPageSizeChange}
            loadingText="Loading..."
            data={data}
            columns={columns}
            className="-striped -highlight"
        />)

代码沙盒

https://codesandbox.io/s/set-initial-page-number-in-react-table-jthci?file=/App.js

如果您在第 3 页并按“重置页面”，它应该在第一页

Answer 1

我创建了一个小的 codesandbox 问题来向您展示它是有效的。检查这个 link

https://codesandbox.io/s/set-initial-page-number-in-react-table-mumef

所以，通过阅读react-table的源代码，我看到用于分页的组件称为ReactTablePagination

该组件有以下行

{showPageJump ? renderPageJump(this.getPageJumpProperties()) : renderCurrentPage(page)}{' '}

这意味着为了更新页面索引，这个属性 showPageJump 应该设置为 false.

我尝试过完全不设置属性，但没有用。当我将它设置为 false 时，它起作用了。

React table - 在手动分页中强制重置页面索引

React table - force reset page index in manual pagination

reactjs

react-table-v6