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

Question

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

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

重现步骤：

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

用户名：[e-mail]

密码：管理员

相关代码：

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;

其他信息： 已经通过 using 遵循教程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

环境

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

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

标签： reactjsreact-admin

Answer 1

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

## 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 后端会忽略这些参数并返回整个列表。所以你应该在你的后端解决这个问题。