带箭头的分页不适用于 typecipt

Question

我正在做一个有客户表的小项目 该表每页显示 10 个客户 桌子下面还有箭头引导用户去见其他顾客

现在的问题是箭头无法正常工作

我想要的是当用户单击右箭头时结果应显示 11-21

这是我的代码

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>) => {
     const [paginationModel, setPaginationModel] = useState({ page: 0, pageSize: 10 })
    const [data, setData] = useState<ReturnCustomer[]>([])
    const [page, setPage] = useState(1);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res: any = await auth.getcustomer({
          start: (paginationModel.page - 1) * paginationModel.pageSize,
          finish: paginationModel.page * paginationModel.pageSize,
        });
        setData(transformData(res.data.data.customers));
      } catch (error) {
        console.error('Error fetching customers:', error);
        setData([]); // Clear data on error
      }
    };
    fetchData();
  }, [auth, paginationModel]);

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

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

  const handlePrevPage = () => {
    if (paginationModel.page > 1) {
      setPaginationModel((prevPaginationModel) => ({
        ...prevPaginationModel,
        page: prevPaginationModel.page - 1,
      }));
    }
  };

  
  return (
    <Grid container spacing={6}>
      <Grid item xs={12}>
        <Card>
          {/* FOR DISPLAYING */}
          <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>

Answer 1

  const dataSliceStart = paginationModel.page * paginationModel.pageSize;
  const dataSliceEnd = dataSliceStart + paginationModel.pageSize;
  const slicedData = allData.slice(dataSliceStart, dataSliceEnd);

这就是解决方案