Mui DataGrid第二页及后续页面数据显示异常问题

问题根源 #

1. 分页参数映射错误：你直接将后端offset转换为DataGrid的page参数（page: dataGridState.offset - 1），但DataGrid的page是从0开始的序号，后端offset正确计算逻辑应为page * pageSize，两者逻辑不匹配导致分页状态混乱。
2. 重复事件监听冲突：同时使用onPageChange和onPaginationModelChange两个分页事件，前者为旧API，会与新分页模型的触发逻辑冲突，造成状态不同步。

修复步骤 #

1. 调整分页状态管理 #

将状态中的offset改为由page和pageSize计算得出，无需单独维护offset状态：

// 初始状态示例
const [dataGridState, setDataGridState] = useState({
  page: 0,
  pageSize: 10,
  loading: false,
  amount: 0
});

2. 修正数据获取与分页处理逻辑 #

在分页变化时，通过当前page和pageSize计算正确的offset：

const fetchPokemon = async (limit, offset) => {
  const response = await fetch(
    `https://pokeapi.co/api/v2/pokemon?limit=${limit}&offset=${offset}`
  );
  const data = await response.json();
  return {
    results: data.results,
    count: data.count
  };
};

// 分页变化处理函数
const handlePaginationChange = async (newModel) => {
  setDataGridState(prev => ({ ...prev, loading: true }));
  const offset = newModel.page * newModel.pageSize;
  const { results, count } = await fetchPokemon(newModel.pageSize, offset);
  setDataGridState(prev => ({
    ...prev,
    page: newModel.page,
    pageSize: newModel.pageSize,
    loading: false,
    amount: count
  }));
  setPokemon(results); // 更新表格数据
};

3. 重构DataGrid组件配置 #

移除冲突的事件监听，使用正确的paginationModel配置：

<DataGrid
  autoHeight
  columns={cols}
  loading={dataGridState.loading}
  rowCount={dataGridState.amount}
  rows={pokemon}
  paginationModel={{
    pageSize: dataGridState.pageSize,
    page: dataGridState.page
  }}
  onPaginationModelChange={handlePaginationChange}
  pageSizeOptions={[10, 20, 50]} // 可选，设置可选每页条数
/>

关键说明 #

• DataGrid的page参数从0开始，对应后端offset = page * pageSize
• 仅使用onPaginationModelChange处理分页变化，避免新旧API冲突
• 确保每次分页切换时，接口请求的offset是当前页第一条数据的索引（比如第2页page=1，offset=10）

内容的提问来源于stack exchange，提问作者Grazielle Carvalho