在使用 2 table 时反应 table pageIndex 问题

Question

我有一个容器。容器将从服务器获取数据。容器有 2 个选项卡。 Tab 在 2 table 之间切换：

 <div>
    {pageOption.type === 'Firms' ? (
        <DataTable
            columns={columnsFirm}
            data={firmData}
            search={false}
            name={'firm'}
            total={brokerFirm.data?.total}
            onPageOptionChange={(options) => console.log(options)}

        />
    ) : (
        <DataTable
            columns={columnsUser}
            data={brokerUser.data?.data || []}
            search={false}
            total={brokerUser.data?.total}
            name={'user'}
            onPageOptionChange={(options) => console.log(options)}
        />
    )}

这是table实现：

function DataTable({
    columns,
    data,
    search,
    total = 1,
    loading,
    name,
    onPageOptionChange
}) {
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        page,
        nextPage,
        previousPage,
        canNextPage,
        canPreviousPage,
        pageOptions,
        setPageSize,
        state: { pageIndex, pageSize },
        prepareRow
    } = useTable(
        {
            columns,
            data,
            initialState: { pageIndex: 0 },
            defaultColumn,
            pageCount: Math.ceil(total / defaultPageState.pageSize),
            manualPagination: true,
            autoResetPage: false
        },
        useFilters,
        useSortBy,
        usePagination
    );
    useEffect(() => {
    if (onPageOptionChange)
        onPageOptionChange({ pageSize, newPageNo: pageIndex });
}, [pageSize, pageIndex, onPageOptionChange]);
}

假设我在tab1，pageIndex 2，如果我切换到tab2，那么tab2中的table，将会有前一个table的pageIndex，而不是从0开始。如何我从 0 开始 pageIndex 对于 tab2 的 table.Here 是 CodeSandbox link with the issue

Answer 1

不确定为什么会这样，但是用 div 包装 table 组件解决了这个问题

<div>
  <DataTable
            columns={columnsFirm}
            data={firmData}
            search={false}
            name={'firm'}
            total={brokerFirm.data?.total}
            onPageOptionChange={(options) => console.log(options)}

        />
</div>

在使用 2 table 时反应 table pageIndex 问题

React table pageIndex issue on when using 2 table

reactjs

react-table