反应管理员分页无法正常工作

问题描述

您所期待的： 反应管理员分页无法正常工作

发生了什么： 列表视图页面显示所有记录，每页分页，页面点击似乎不起作用

重现步骤：

https://lunch-picker-admin.vercel.app/

用户名：[e-mail]

密码：admin

相关代码：

github 仓库：https://github.com/yeukfei02/lunchPickerAdmin

代码：

import React from "react";
import { createbrowserHistory as createHistory } from "history";
import { Admin,Resource,fetchUtils } from "react-admin";
import jsonServerProvider from "ra-data-json-server";
import LoginPage from "./loginPage";
import Dashboard from "./dashboard";
import authProvider from "./authProvider";

import { defaultTheme } from "react-admin";
import { createMuiTheme } from "@material-ui/core/styles";
import SettingsInputAntennaIcon from "@material-ui/icons/SettingsInputAntenna";
import RestaurantIcon from "@material-ui/icons/Restaurant";
import RestaurantMenuIcon from "@material-ui/icons/RestaurantMenu";
import StarIcon from "@material-ui/icons/Star";
import CategoryIcon from "@material-ui/icons/Category";
import FavoriteIcon from "@material-ui/icons/Favorite";

import {
  UserConnectionDetailsList,UserConnectionDetailsShow,} from "./resources/user-connection-details";
import { RestaurantList,RestaurantShow } from "./resources/restaurant";
import {
  RestaurantDetailsList,RestaurantDetailsShow,} from "./resources/restaurant-details";
import {
  RestaurantDetailsReviewList,RestaurantDetailsReviewShow,} from "./resources/restaurant-details-review";
import { CategoryList,CategoryShow } from "./resources/category";
import { FavouritesList,FavouritesShow } from "./resources/favourites";

const customTheme = createMuiTheme({
  ...defaultTheme,...{
    palette: {
      primary: {
        main: "#2b76f0",},secondary: {
        main: "#ed1f30",});

const history = createHistory();

const httpClient = (url,options = {}) => {
  if (!options.headers) {
    options.headers = new Headers({ Accept: "application/json" });
  }
  options.user = {
    authenticated: true,token: "lunchPickerAdmin",};
  return fetchUtils.fetchJson(url,options);
};
const dataProvider = jsonServerProvider(
  "https://www.lunch-picker-api.com/react-admin",httpClient
);

function App() {
  return (
    <Admin
      theme={customTheme}
      loginPage={LoginPage}
      dashboard={Dashboard}
      authProvider={authProvider}
      dataProvider={dataProvider}
      history={history}
    >
      <Resource
        name="user-connection-details"
        icon={SettingsInputAntennaIcon}
        list={UserConnectionDetailsList}
        show={UserConnectionDetailsShow}
      />
      <Resource
        name="restaurant"
        icon={RestaurantIcon}
        list={RestaurantList}
        show={RestaurantShow}
      />
      <Resource
        name="restaurant-details"
        icon={RestaurantMenuIcon}
        list={RestaurantDetailsList}
        show={RestaurantDetailsShow}
      />
      <Resource
        name="restaurant-details-review"
        icon={StarIcon}
        list={RestaurantDetailsReviewList}
        show={RestaurantDetailsReviewShow}
      />
      <Resource
        name="category"
        icon={CategoryIcon}
        list={CategoryList}
        show={CategoryShow}
      />
      <Resource
        name="favourites"
        icon={FavoriteIcon}
        list={FavouritesList}
        show={FavouritesShow}
      />
    </Admin>
  );
}

export default App;

其他信息： 已经按照教程使用 jsonServerProvider，我的后端 API 已经返回带有 X-Total-Count 和 Access-Control-Expose-Headers: X-Total-Count 的响应标头 按照本教程 https://github.com/marmelab/react-admin/tree/master/packages/ra-data-json-server

环境

• React 管理员版本：3.15.2
• 未出现问题的最新版本（如果适用）：
• 反应版本：17.0.2
• 浏览器：chrome
• 堆栈跟踪（如果发生 JS 错误）：否

欢迎任何人提出建议，谢谢。

解决方法

问题可能来自您的 API。如果您查看浏览器开发工具的网络选项卡，react-admin 会使用正确的分页查询参数 _start 和 _end 调用您的 API：

## first page
https://www.lunch-picker-api.com/react-admin/user-connection-details?_end=10&_order=ASC&_sort=id&_start=0

## second page
https://www.lunch-picker-api.com/react-admin/user-connection-details?_end=20&_order=ASC&_sort=id&_start=10

您的 API 后端会忽略这些参数并返回整个列表。所以你应该在你的后端解决这个问题。