如何让我的 React 表始终重置为第 1 页？答案

【问题标题】：How can I get my React table to always reset to page 1?如何让我的 React 表始终重置为第 1 页？
【发布时间】：2021-01-15 08:35:20
【问题描述】：

我的反应表显示基于用户选择的 2 或 3 个不同过滤器的数据。每次更改搜索过滤器并更新表的数据时，表都会从显示上次查看的页码开始。如何确保每次更改搜索过滤器时表格始终从第 1 页开始？

反应表代码：

<ReactTable
                    data={this.props.summarydata}
                    columns = {columns}
                    defaultPageSize = {40}
                    pageSizeOptions = {[20, 50, 100, 500]}
                    style={getStyle}
                    loadingText = {"Loading..."}
                    noDataText={"No data found. Please edit search parameters."}
                    minRows={10}
                    resizable={true}
                    previousText = {"Previous"}               
                >
                    {(state, filteredData, instance) => {
                        this.ReactTable = state.pageRows.map(post => { return post._original});
                        return(
                            <div>
                                {filteredData()}
                            </div>
                        )
                    }}

                </ReactTable>

【问题讨论】：

如果您将代码上传到在线 IDE 中会有所帮助，例如 codesandbox。

标签： reactjs pagination react-table

【解决方案1】：

根据the docs，您可以像这样将autoResetPage 属性添加到您的表格选项对象中，

<ReactTable
                    data={this.props.summarydata}
                    columns = {columns}
// This one!
                    autoResetPage={true}
                    defaultPageSize = {40}
                    pageSizeOptions = {[20, 50, 100, 500]}
                    style={getStyle}
                    loadingText = {"Loading..."}
                    noDataText={"No data found. Please edit search parameters."}
                    minRows={10}
                    resizable={true}
                    previousText = {"Previous"}               
                >
                    {(state, filteredData, instance) => {
                        this.ReactTable = state.pageRows.map(post => { return post._original});
                        return(
                            <div>
                                {filteredData()}
                            </div>
                        )
                    }}

                </ReactTable>

    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        page,
        prepareRow,
        filters,
        allColumns,
        setFilter,
        selectedFlatRows,
        // below new props related to 'usePagination' hook
        canPreviousPage,
        canNextPage,
        pageOptions,
        pageCount,
        gotoPage,
        nextPage,
        previousPage,
        setPageSize,
        state: {pageIndex, pageSize},
    } = useTable(
        {
            columns,
            data,
            defaultColumn: {
                Filter: DefaultColumnFilter,
            },
            filterTypes,
// This is the one you want.
            autoResetPage,
                hiddenColumns: columns.filter((col: any) => col.show === false).map((col) => col.id || col.accessor),
                pageIndex: 0,
                pageSize: 20,
            },
        },
        ...hooks
    );

【讨论】：