Node.js 如何处理从后端（nodejs）返回的数据以使分页在react admin中工作

我在react admin中的分页有问题，您可以在这里查看：
分页总是显示相同的记录，我是指同时显示所有记录。

---我的后端---:

这就是数据提供者：

import { fetchUtils } from 'react-admin';
import { stringify } from 'query-string';

const apiUrl = 'http://localhost:5000';
const httpClient = fetchUtils.fetchJson;

export default {
    getList: (resource, params) => {
        const { page, perPage } = params.pagination;
        const { field, order } = params.sort;
        const query = {
            sort: JSON.stringify([field, order]),
            range: JSON.stringify([(page - 1) * perPage, page * perPage - 1]),
            filter: JSON.stringify(params.filter),
        };
        const url = `${apiUrl}/${resource}?${stringify(query)}`;
     
        return httpClient(url).then(({ headers, json }) => ({
            data: json.map((resource)=>({...resource, id:resource._id})),
            total: parseInt(headers.get('content-range').split('/').pop(), 10),
        }));
    },

    getOne: (resource, params) =>
        httpClient(`${apiUrl}/${resource}/${params.id}`).then(({ json }) => ({
             ...json, id: json._id ,
        })),

    getMany: (resource, params) => {
        const query = {
            filter: JSON.stringify({ id: params.ids }),
        };
        const url = `${apiUrl}/${resource}?${stringify(query)}`;
        return httpClient(url).then(({ json }) => ({
            data: json.map(resource => ({ ...resource, id: resource._id }) )
             }));
    },

    getManyReference: (resource, params) => {
        const { page, perPage } = params.pagination;
        const { field, order } = params.sort;
        const query = {
            sort: JSON.stringify([field, order]),
            range: JSON.stringify([(page - 1) * perPage, page * perPage - 1]),
            filter: JSON.stringify({
                ...params.filter,
                [params.target]: params.id,
            }),
        };
        const url = `${apiUrl}/${resource}?${stringify(query)}`;

        return httpClient(url).then(({ headers, json }) => ({
            data: json,
            total: parseInt(headers.get('content-range').split('/').pop(), 10),
        }));
    },

    update: (resource, params) =>
        httpClient(`${apiUrl}/${resource}/${params.id}`, {
            method: 'PUT',
            body: JSON.stringify(params.data),
        }).then(({ json }) => ({ ...json, id: json._id })),

    updateMany: (resource, params) => {
        const query = {
            filter: JSON.stringify({ id: params.ids}),
        };
        return httpClient(`${apiUrl}/${resource}?${stringify(query)}`, {
            method: 'PUT',
            body: JSON.stringify(params.data),
        }).then(({ json }) => ({ data: json }));
    },

    create: (resource, params) =>
        httpClient(`${apiUrl}/${resource}`, {
            method: 'POST',
            body: JSON.stringify(params.data),
        }).then(({ json }) => ({
            data: { ...params.data, id: json.id },
        })),

    delete: (resource, params) =>
        httpClient(`${apiUrl}/${resource}/${params.id}`, {
            method: 'DELETE',
        }).then(({ json }) => ({ data: json })),

    deleteMany: (resource, params) => {
        const query = {
            filter: JSON.stringify({ id: params.ids}),
        };
        return httpClient(`${apiUrl}/${resource}?${stringify(query)}`, {
            method: 'DELETE',
        }).then(({ json }) => ({ data: json }));
    }
};

还有这个App.js:

import * as React from "react";
import { Admin, Resource  } from 'react-admin';
import  dataProvider  from './DataProvider'
import { Products } from "./Products";
const App=()=> {

  return (
    <div className="App">
<Admin  dataProvider={dataProvider}>
<Resource name='Products' list={Products} />
  </Admin>
    </div>
  );
}

export default App;

import*as React from“React”；
从“react Admin”导入{Admin，Resource}；
从“./dataProvider”导入数据提供程序
从“/Products”导入{Products}”；
常量应用=（）=>{
返回(
);
}
导出默认应用程序；

我不知道如何解决问题我花了两天的时间解决它，但无法解决。

---

如果我的问题不清楚，请尽快更新。

您似乎正在将所需参数发送到后端（即范围），但是，您似乎没有在后端对这些参数执行任何操作。您必须使用它们来告诉mongoDB它应该执行分页

在mongoDB中进行分页的一种方法是使用API的

skip（）

（）和

limit（）

（）函数。如果要使用这些参数，可能更合理的做法是，不发送

range

查询参数，而是向后端发送

pageSize

和

offset

参数。

pageSize

将只是您的

perPage

值，

偏移量将通过
page
与
perPage
相乘来计算

然后，在后端，您需要从查询对象检索这些参数。你可以这样做

const { offset, pageSize } = req.query;

但是，请注意，这些参数将是字符串值，因此在将它们作为参数传递给
skip
和
limit
函数之前，您希望将它们解析为数字。
更改页面时，您是否确保对后端的请求具有正确的查询参数？也就是说，如果你选择一个不同的页面，范围参数会发生变化吗？我想这就是问题所在，我会尝试它，看看它是否有效，非常感谢你。希望这对你有用，如果它帮助你解决这个问题，请考虑接受答案：是的，我一定会这样做的。
const { offset, pageSize } = req.query;