MUI DataGrid服务端渲染时，useEffect未随分页状态变化触发

核心排查方向 #

1. 先确认pageState是否真的发生更新 #

在setPageState回调中添加日志，验证分页操作是否真的修改了pageState：

onPageChange={(newPage: any) => setPageState(old => {
  const newState = {...old, page: newPage + 1};
  console.log('更新后的pageState:', newState);
  return newState;
})}
onPageSizeChange={(newPageSize: any) => setPageState(old => {
  const newState = {...old, pageSize: newPageSize};
  console.log('更新后的pageState:', newState);
  return newState;
})}

如果日志未打印，说明DataGrid分页事件未触发，问题出在组件属性配置；如果日志打印但useEffect未执行，再继续排查。

2. 清理冗余分页属性，避免API冲突 #

你同时使用了两套分页控制API：onPageChange/onPageSizeChange+page/pageSize，以及onPaginationModelChange/paginationModel，这会导致DataGrid状态逻辑混乱，是核心问题。

MUI官方推荐服务端分页统一使用paginationModel和onPaginationModelChange，修改代码如下：

<StyledDataGrid 
  rows={data} 
  columns={columns}
  rowCount={pageState.total}
  loading={pageState.isLoading}
  pagination
  pageSizeOptions={[3,5,10]}
  paginationMode="server"
  // 移除单独的page、pageSize、onPageChange、onPageSizeChange
  paginationModel={{ 
    page: pageState.page - 1, 
    pageSize: pageState.pageSize 
  }}
  onPaginationModelChange={(model) => {
    setPageState(old => ({
      ...old,
      page: model.page + 1, // 转换为业务逻辑的从1开始的页码
      pageSize: model.pageSize
    }));
  }}
  initialState={{
    pagination: {
      paginationModel: { pageSize: pageState.pageSize, page: pageState.page -1},
    },
  }}
/>

3. 验证useEffect依赖的正确性 #

• 确保pageState是通过useState定义的，而非普通变量或未正确处理的props：

  const [pageState, setPageState] = useState({
    page: 1,
    pageSize: 3,
    total: 0,
    isLoading: false
  });
  

• 如果fetchData是组件内部函数，用useCallback包裹避免不必要的渲染（当前问题是完全未触发，这一步为优化项）：

  const fetchData = useCallback(async () => {
    // 你的数据请求逻辑
  }, [pageState.page, pageState.pageSize]);
  

4. 排查服务端渲染的hydration问题 #

如果是Next.js等SSR框架：

• 检查服务端与客户端的pageState初始值是否一致，避免hydration不匹配导致状态更新被忽略；
• 给useEffect添加客户端判断，确保仅在客户端执行：

  useEffect(() => {
    if (typeof window !== 'undefined') {
      fetchData();
    }
  }, [pageState.page, pageState.pageSize]);
  

内容的提问来源于stack exchange，提问作者Andre Pujol