React双Tab切换react-table时pageIndex未重置为0问题如何解决

根因说明 #

两个<DataTable>组件在DOM树中处于同一层级的相同位置，React的diff算法默认会复用同一个组件实例，不会触发销毁重建逻辑，因此useTable内部维护的pageIndex状态会被保留，导致切换Tab后新表格继承了前一个表格的页码。 #

方案1：添加唯一key属性（推荐，改造成本最低） #

给不同Tab下的表格组件设置唯一的key值，让React判定为两个不同的组件，切换Tab时自动销毁旧实例、初始化新实例，useTable会自动使用初始配置的pageIndex:0完成重置。
修改后的容器渲染代码：

<div>
    {pageOption.type === 'Firms' ? (
        <DataTable
            key="firm"
            columns={columnsFirm}
            data={firmData}
            search={false}
            name={'firm'}
            total={brokerFirm.data?.total}
            onPageOptionChange={(options) => console.log(options)}
        />
    ) : (
        <DataTable
            key="user"
            columns={columnsUser}
            data={brokerUser.data?.data || []}
            search={false}
            total={brokerUser.data?.total}
            name={'user'}
            onPageOptionChange={(options) => console.log(options)}
        />
    )}
</div>

方案2：主动监听Tab变化重置页码（适合需要保留组件实例的场景） #

如果不需要销毁组件实例（比如要保留表格内其他自定义状态），可以通过传入Tab标识，主动调用useTable提供的gotoPage方法重置页码。

1. 首先给DataTable组件新增activeTab属性，传入当前Tab的类型：

// 容器内渲染时新增activeTab prop
<DataTable
    activeTab={pageOption.type}
    // 其他原有属性保持不变
/>

2. 修改DataTable组件内部逻辑，新增重置页码的副作用：

function DataTable({
    columns,
    data,
    search,
    total = 1,
    loading,
    name,
    onPageOptionChange,
    activeTab // 新增入参
}) {
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        page,
        nextPage,
        previousPage,
        canNextPage,
        canPreviousPage,
        pageOptions,
        setPageSize,
        gotoPage, // 导出useTable提供的跳转页码方法
        state: { pageIndex, pageSize },
        prepareRow
    } = useTable(
        {
            columns,
            data,
            initialState: { pageIndex: 0 },
            defaultColumn,
            pageCount: Math.ceil(total / defaultPageState.pageSize),
            manualPagination: true,
            autoResetPage: false
        },
        useFilters,
        useSortBy,
        usePagination
    );

    // 新增：监听Tab变化，切换时重置页码到0
    useEffect(() => {
        gotoPage(0);
    }, [activeTab, gotoPage]);

    useEffect(() => {
        if (onPageOptionChange)
            onPageOptionChange({ pageSize, newPageNo: pageIndex });
    }, [pageSize, pageIndex, onPageOptionChange]);
}

内容的提问来源于stack exchange，提问作者Shadab Faiz