Блог

Что вы ожидали: ожидаемая страница администратора react не работает

Что произошло вместо этого: страница просмотра списка отображает все записи, разбиение на страницы на страницы и щелчок по странице, похоже, не работает

Шаги по воспроизведению:

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

имя пользователя: admin@admin.com

пароль: администратор

Связанный код:

репо на 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-admin: 3.15.2
• Последняя версия, в которой не было проблемы (если применимо):
• Версия реакции: 17.0.2
• Браузер: chrome
• Трассировка стека (в случае ошибки JS): нет

любое предложение приветствуется, спасибо.

Проблема, скорее всего, связана с вашим API. Если вы посмотрите на вкладку сеть вашего браузера devtools, react-admin вызовет ваш API с правильными параметрами запроса на разбиение _start на страницы и _end :

 ## first page
https://www.lunch-picker-api.com/react-admin/user-connection-details?_end=10amp;_order=ASCamp;_sort=idamp;_start=0

## second page
https://www.lunch-picker-api.com/react-admin/user-connection-details?_end=20amp;_order=ASCamp;_sort=idamp;_start=10
 

Ваш сервер API игнорирует эти параметры и возвращает весь список. Так что вам следует исправить это в своем бэкэнде.