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

Posted 2023-02-22

【中文标题】当页码更改时，React 分页不会更新页面数据

【英文标题】：React pagination does not update page data when page number is changed

【发布时间】：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
           
         ] 
   />

【参考方案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
            />