React表pageIndex问题时，使用2表

Question

我有一个容器。容器将从服务器获取数据。容器有2个标签。选项卡在两个表之间切换:

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

This is table Implementation:

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中的表将具有前一个表的pageIndex，而不是从0开始。我如何开始pageIndex从0 tab2的表。这里是CodeSandbox的链接与问题

Answer 1

不知道为什么会发生，但是用div包装table组件修复了这个问题

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