在前端反应分页

Question

在我的 api 中在 react 中构建分页时遇到问题。但是构建这个函数的逻辑，我做不到。

我有一个分页路线，限制显示来自我的应用程序后端的 10 个信息：

我的后端有这个路由的接口

export default interface IPaginated<T> {

  data: T[];
  totalElements: number;
  page: number;
  elements: number;
  elementsPerPage: number;
  totalPages: Number;
  firstPage: boolean;
  lastPage: boolean;
}

这是我的前端

我的个人界面

export default interface IPerson {
  id: string;
  name: string;
  age: string;
  maritalstatus: string;
  cpf: string;
  city: string;
  state: string;
}

这就是我从我的 api 中捕获数据的方式

  async function loadPerson() {
    api.get<IPerson[]>('/person').then((response) => {
      const personFormatted = response.data.map((person) => {
        return {
          ...person,
        };
      });
      setPerson(personFormatted);
    });
  }