React中PrimeReact Datatable分页点击后offset状态重置为0如何解决？

核心原因 #

1. 请求加载阶段总记录数被错误赋值为0：你代码中const { items: clientes = [], total = 0 } = data?.clients || {};逻辑会在Apollo请求pending状态时，因为data为undefined，给total赋值默认值0。PrimeReact DataTable的懒加载分页逻辑会自动校验当前偏移量不能超过总记录数允许的最大值，当totalRecords为0时，最大有效偏移量就是0，因此组件会自动重置first属性为0，触发onPage回调把你的offset状态改回初始值。
2. 组件导出错误：你提供的ClientsTable组件代码中，定义的组件名为ClientsTable，但最后导出的是ResponsiveDataTable，如果实际运行代码也是这个问题，会导致组件引用异常，也可能触发状态重置。

修复方案 #

1. 保留加载阶段的总记录数 #

不要在请求pending阶段将total重置为0，选择保留上一次的查询结果：
修改useQuery配置，开启网络状态变化通知并保留上一次数据：

// 修改useQuery调用
const { data, loading, previousData } = useQuery(query, {
  ...queryParams,
  notifyOnNetworkStatusChange: true
});
// 取值优先用当前数据，没有则用上次请求的有效数据
const currentData = data || previousData;
const { items: clientes = [], total = 0 } = currentData?.clients || {};

你也可以单独用useState存储total值，仅当接口返回有效数据时才更新：

const [totalRecords, setTotalRecords] = useState(0);
useEffect(() => {
  if(data?.clients?.total) {
    setTotalRecords(data.clients.total);
  }
}, [data]);
// 传递给table时用totalRecords而不是动态取值的total

2. 修复组件导出错误 #

将ClientsTable组件的最后一行导出语句修改为：

export default ClientsTable;

3. 可选优化：避免查询参数频繁刷新 #

将queryParams用useMemo包裹，避免每次组件渲染都生成新的参数对象，触发useQuery不必要的重执行：

import { useMemo } from 'react';

// 组件内部
const queryParams = useMemo(() => ({
    client,
    variables: {
        input: {
            pagination: { limit: 10, offset },
            search: {
                searchFields: ['name', 'email', 'document_id'],
                searchTerm: searchInput || '',
            },
            orderBy: { field: 'name', direction: 'ASC' },
        },
    },
}), [offset, searchInput]);

内容的提问来源于stack exchange，提问作者Michal Ružička Ružička