Question

我是新来的人，我正在使用“ 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
           }
         ]} 
   />

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

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

1 个答案: