自定义MUI Datagrid分页报错：无法读取undefined的length/slice属性求排查

报错原因分析 #

你遇到的Cannot read properties of undefined (reading 'length')错误，核心原因是totalPages变量未定义或值为undefined，导致Array.from({ length: totalPages })执行失败。而slice相关报错通常是分页逻辑依赖的核心参数（如总条目数、每页条数）未正确传递，引发后续数组操作异常。

关于onPreviousPageClick/onNextPageClick的说明 #

MUI的TablePagination（你代码里的GridPagination应为笔误）的ActionsComponent不会传入onPreviousPageClick和onNextPageClick这两个Props，这是参考代码的错误点。正确的翻页逻辑需要通过组件内置的onPageChange、page、hasPreviousPage、hasNextPage来实现。

修复后的代码 #

const CustomPagination = (props) => {
  return (
    <TablePagination
      ActionsComponent={(innerProps) => {
        // 计算总页数，兼容rowsPerPage为0（显示全部数据）的场景
        const totalPages = innerProps.rowsPerPage > 0 
          ? Math.ceil(innerProps.count / innerProps.rowsPerPage) 
          : 1;

        // 转换组件内部0-based页码为用户友好的1-based显示
        const currentDisplayPage = innerProps.page + 1;

        return (
          <>
            <IconButton 
              onClick={() => innerProps.onPageChange(null, innerProps.page - 1)} 
              disabled={!innerProps.hasPreviousPage}
            >
              <NavigateBeforeIcon />
            </IconButton>
            <Select 
              value={currentDisplayPage} 
              onChange={(e) => innerProps.onPageChange(null, e.target.value - 1)}
            >
              {Array.from({ length: totalPages }, (_, index) => index + 1).map((page) => (
                <MenuItem key={page} value={page}>
                  {page}
                </MenuItem>
              ))}
            </Select>
            <IconButton 
              onClick={() => innerProps.onPageChange(null, innerProps.page + 1)} 
              disabled={!innerProps.hasNextPage}
            >
              <NavigateNextIcon />
            </IconButton>
          </>
        );
      }}
      {...props}
    />
  );
};

额外注意事项 #

• 父组件必须向CustomPagination传递count（总条目数）、rowsPerPage（每页条数）、page（当前页码，0-based）、onPageChange（页码变更回调）这些必填Props，否则仍会出现undefined相关报错。
• 若使用MUI X的DataGrid分页组件，Props名称可能略有差异，但核心逻辑一致：通过内置方法实现翻页，确保总页数计算依赖的参数有效。

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