微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

React-Admin 分页无法正常工作?

如何解决React-Admin 分页无法正常工作?

首先看一下问题:pagination problem
我是第一次使用 react-admin,所以我刚刚开始并创建了一些小项目来练习,然后再将其集成到我的实际项目中。
所以我在前端和 nodejs 中使用 react,后端使用 express 中间件。
据我所知,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,filter: JSON.stringify({
                ...params.filter,[params.target]: params.id,}),};
        const url = `${apiUrl}/${resource}?${stringify(query)}`;

        return httpClient(url).then(({ headers,json }) => ({
            data: json,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)}`,}).then(({ json }) => ({ data: json }));
    },create: (resource,params) =>
        httpClient(`${apiUrl}/${resource}`,{
            method: 'POST',}).then(({ json }) => ({
            data: { ...params.data,id: json.id },delete: (resource,{
            method: 'DELETE',deleteMany: (resource,}).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}`)
})

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。