TypeScript项目分页箭头功能异常，无法正确加载后续数据求助

核心问题分析 #

• DataGrid的paginationModel采用0-based索引（page从0开始），但API请求中错误使用了1-based的计算逻辑，导致分页参数完全错误。
• 存在未使用的冗余page状态，增加了代码复杂度。
• 上一页的判断条件错误，基于0-based索引时应判断page是否大于0，而非1。

修复后的完整代码 #

interface ReturnCustomer {
  entryId: string;
  name: string;
  orgId: number;
  id: number;
}

interface CustomerData {
  entryId: string;
  name: string;
  orgId: number;
  id: number;
}

const CustomerList = ({ apiData }: InferGetStaticPropsType<typeof getStaticProps>) => {
  // 初始page设为0（DataGrid默认0-based索引）
  const [paginationModel, setPaginationModel] = useState({ page: 0, pageSize: 10 })
  const [data, setData] = useState<ReturnCustomer[]>([])

  useEffect(() => {
    const fetchData = async () => {
      try {
        // 基于0-based page计算正确的分页区间
        const start = paginationModel.page * paginationModel.pageSize;
        const finish = (paginationModel.page + 1) * paginationModel.pageSize;
        
        const res: any = await auth.getcustomer({ start, finish });
        setData(transformData(res.data.data.customers));
      } catch (error) {
        console.error('Error fetching customers:', error);
        setData([]);
      }
    };
    fetchData();
  }, [auth, paginationModel]);

  const transformData = (customers: any[]): CustomerData[] => {
    return customers.map((customer) => ({
      id: customer.entryId,
      entryId: customer.entryId,
      name: customer.name,
      orgId: customer.orgId,
    }));
  };

  const handleNextPage = () => {
    setPaginationModel((prev) => ({
      ...prev,
      page: prev.page + 1,
    }));
  };

  const handlePrevPage = () => {
    // 适配0-based索引，page大于0时允许切换上一页
    if (paginationModel.page > 0) {
      setPaginationModel((prev) => ({
        ...prev,
        page: prev.page - 1,
      }));
    }
  };

  return (
    <Grid container spacing={6}>
      <Grid item xs={12}>
        <Card>
          <TableHeader value={value} handleFilter={handleFilter} toggle={toggleAddCustomerDrawer} />
          <DataGrid
            autoHeight
            rows={data}
            columns={columns}
            checkboxSelection
            disableRowSelectionOnClick
            pageSizeOptions={[10, 25, 50]}
            paginationModel={paginationModel}
            onPaginationModelChange={setPaginationModel}
          />
        </Card>
      </Grid>
    </Grid>
  );
};

关键修复点说明 #

1. 分页索引对齐：将API请求的start和finish改为0-based计算，page=0时请求0-10条（对应第1-10条数据），page=1时请求10-20条（对应第11-20条数据），完全匹配每页10条的展示需求。
2. 移除冗余状态：删除未使用的page状态变量，简化组件逻辑。
3. 修正上一页判断：把paginationModel.page > 1改为paginationModel.page > 0，适配DataGrid的0-based索引规则，避免无法回到第一页的问题。
4. 接口类型修正：将原接口中entryId和name的错误字符串字面量类型"string"改为正确的string类型。

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