MUI DataGrid特定页面出现TypeError: rowModel未定义问题求助

以下是针对问题的具体排查和解决步骤：

1. 修复分页状态同步问题 #

自定义分页组件中同时调用apiRef.current.setPage和更新paginationModel会导致DataGrid内部状态与外部分页模型不一致，这是引发错误的核心原因之一。服务端分页模式下，应让DataGrid依赖paginationModel驱动数据获取，而非手动修改内部页码。

修改CustomPagination的onChange逻辑，移除手动设置内部页码的代码：

function CustomPagination() {
    const apiRef = useGridApiContext();
    const page = useGridSelector(apiRef, gridPageSelector);
    const pageCount = useGridSelector(apiRef, gridPageCountSelector);

    return (
      <Pagination
        color="primary"
        variant="outlined"
        shape="rounded"
        page={page + 1}
        count={pageCount} // 改用DataGrid自动计算的总页数，避免手动计算误差
        renderItem={(props2) => <PaginationItem {...props2} disableRipple />}
        onChange={(event, value) => {
          // 仅更新外部分页模型，由DataGrid的onPaginationModelChange触发数据请求
          setPaginationModel({ ...paginationModel, page: value - 1 });
        }}
      />
    );
  }

2. 确保分页请求参数与当前模型一致 #

当前onPaginationModelChange直接调用refetch，可能未传递最新的分页参数，导致请求数据与当前页码不匹配。修改onPaginationModelChange，使用回调参数中的最新分页模型作为请求条件：

<DataGrid
  rows={substanceRowData}
  columns={columns}
  loading={isLoading}
  disableRowSelectionOnClick
  paginationMode="server"
  rowCount={rowCountState}
  // 接收新分页模型，同步状态并传递给fetchData
  onPaginationModelChange={(newModel) => {
    setPaginationModel(newModel);
    fetchData(newModel);
  }}
  slots={{
    pagination: CustomPagination,
  }}
/>

更新fetchData函数，使用最新分页参数发起请求：

const fetchData = (newModel) => {
  refetch({
    page: newModel.page,
    pageSize: newModel.pageSize
  });
};

3. 验证rowCount与实际数据的一致性 #

若某些页面API返回的rows为空，但rowCountState仍显示总条数，会导致DataGrid尝试渲染不存在的行。添加空数据处理逻辑：

• 在DataGrid中设置isEmpty={substanceRowData.length === 0}
• 当API返回空数据时，自动调整到最后一个有效页码：

// 假设useQuery返回data包含rows和totalCount字段
const { data, isLoading } = useQuery(['substanceData', paginationModel], () => 
  fetchSubstanceData(paginationModel.page, paginationModel.pageSize)
);

useEffect(() => {
  if (data?.rows.length === 0 && paginationModel.page > 0) {
    const lastValidPage = Math.max(0, Math.ceil(data.totalCount / paginationModel.pageSize) - 1);
    setPaginationModel(prev => ({ ...prev, page: lastValidPage }));
  }
}, [data, paginationModel]);

4. 强化加载状态管理 #

确保isLoading状态准确反映数据请求状态，避免DataGrid在数据未就绪时渲染：

• 确认useQuery的isLoading正确传递给DataGrid的loading属性
• 若useQuery的isLoading不够及时，可在fetchData时手动设置临时加载状态：

const [isFetching, setIsFetching] = useState(false);
const fetchData = (newModel) => {
  setIsFetching(true);
  refetch({
    page: newModel.page,
    pageSize: newModel.pageSize
  }).finally(() => setIsFetching(false));
};

// DataGrid的loading属性合并两个状态
<DataGrid
  loading={isLoading || isFetching}
  // ...其他属性
/>

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