node.js - React-Admin 分页无法正常工作？

Question

首先看一下问题：分页问题
我第一次使用react-admin，所以我刚刚开始并创建一些小项目来练习，然后再将它集成到我的实际项目中。
所以我在前端使用 react ，在后端使用带有 express 中间件的 nodejs。
据我所知，react-admin 有一个 dataprovider，所以我创建了 dataprovider.js 文件：

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)}`;
        httpClient(url).then(({ headers, json }) => {
          console.log(headers.get('content-range'))
          console.log(json)
        });

        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 }) => ({
            data: json,
        })),

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

    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 }) => ({ data: json })),

    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 }));
    }
};

以及包含 Admin 的 App 组件：

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";
import { List, Datagrid, TextField, EditButton  } from 'react-admin';

export const Products = props => (
<List {...props}>
<Datagrid rowClick="edit">
    <TextField source='id'/>
    <TextField source="Title" />
    <TextField source='Brand'/>
    <EditButton  />
</Datagrid>
</List>
);

--------------------后端：Nodejs -- expressjs ------------------------ ------------
这是我从数据库返回产品的简单服务器：

const express = require('express')
const app = express()
const port = 5000
var MongoClient = require("mongodb").MongoClient;
const { ObjectId } = require("mongodb"); // or ObjectID
var url = "mongodb://localhost:27017/storedz";
var db;
var storedz;


app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", req.header("Origin"));
  res.header("Access-Control-Allow-Credentials", true);
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );

  res.header("Access-Control-Expose-Headers", "Content-Range");
  res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE");
  next();
});



MongoClient.connect(url, function (err, database) {
    if (err) throw err;
    db = database;
    storedz = db.db("storedz");
  });



app.get('/Products',(req, res) => {
  storedz
    .collection("products")
    .find({})
    .toArray((err, result) => {
      if (err) {
        return res.header(400).json("something went wrong");
      }
      res.header("Content-Range", `getProducts 0-4/${result.length}`);
      console.log(result.length)
      res.send(result);
    });

  })

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

所以一切正常，我的意思是我得到了所有的产品，并且 iu res.header("Content-Range", Products 0-4/${result.length}); 因为 react-admin 需要它来进行分页。

所以如果我在这里遗漏了什么，请纠正我并给出正确的路径，以便我可以进入下一步。
谢谢你。

标签： node.jsreactjsexpressreact-admin