当页码更改时，React 分页不会更新页面数据答案

【问题标题】：React pagination does not update page data when page number is changed当页码更改时，React 分页不会更新页面数据
【发布时间】：2020-02-25 03:35:54
【问题描述】：

我是新手，我正在使用“ReactTable”组件来显示数据以及分页。更改页面时，页码会更新，但显示的数据不会更新（当页码从 1 设置为 2 时，表格不会更新以显示第二页的下一个数据）。此外，更改行数并不总是有效。我知道我必须编写一个触发函数，但我不知道在哪里以及如何编写一个。

表格的分页如下所示： Pagination image

我遇到了一些自定义分页代码，但它们不起作用。另外，我对使用组件中的内置分页代码感兴趣。

    <ReactTable
         data={this.props.results.relations}
         minRows={0}
         showPagination={true}
         defaultPageSize={10}
         defaultFilterMethod={(filter, row) =>
              String(row[filter.id]).toLowerCase().includes(filter.value.toLowerCase())}
         columns={[
           {
             Header: "Column1",
             accessor: "col1",
             width: 70,
             filterMethod: (filter, rows) =>
             matchSorter(rows, filter.value, { keys: ["col1"] }),
             filterAll: true
           },
           {
             Header: "Column2",
             accessor: "col2",
             width: 150,
             filterMethod: (filter, rows) =>
             matchSorter(rows, filter.value, { keys: ["col2"] }),
             filterAll: true
           }
         ]} 
   />

【问题讨论】：

标签： reactjs pagination react-table reactstrap

【解决方案1】：

在表中添加手动道具以在回调后获取更新的数据，并在 onPageChange 中编写将设置新数据的函数

//In component Constructor
this.state{
   currentPage : 0;
   data : this.props.data,
   columns : [
           {
             Header: "Column1",
             accessor: "col1",
             width: 70,
             filterMethod: (filter, rows) =>
             matchSorter(rows, filter.value, { keys: ["col1"] }),
             filterAll: true
           },
           {
             Header: "Column2",
             accessor: "col2",
             width: 150,
             filterMethod: (filter, rows) =>
             matchSorter(rows, filter.value, { keys: ["col2"] }),
             filterAll: true
           }
         ]
}

changePage(pageIndex) {
   // setState new data in data variable
   // setState currentPage variable as well
}

// In render
    <ReactTable  
            className="custom-table column-larg-spacing"
                manual
                data={this.state.data}
                columns={this.state.columns} 
                defaultPageSize = {10}
                minRows = {0}
                resizable = {false} 
                page={this.state.currentPage}
                onPageChange={pageIndex => changePage(pageIndex)}
                pages = {5} // show total pages
                showPaginationBottom={true}
            />

【讨论】：