如何更改 React-Admin 过滤器

问题描述

我是 React 新手，我的仪表板使用 react-admin。但是我在从我的 API 获取数据时遇到问题。

这是我的 API：

http://localhost:3333/verifications/browse?page=1&per_page=10&verification_level_id=2&verification_status_id=3

然后我看到了 react-admin 使用的端点，

http://localhost:3333/verifications/browse?filter=%7B%7D&range=%5B0%2C9%5D&sort=%5B%22id%22%2C%22ASC%22%5D

如何更改该端点？

解决方法

在请求发送前（以及收到后的响应）修改请求的地方是dataProvider。 React-admin 有 extensive documentation about it。如果你不了解 react-admin 中的 dataProviders，你会遇到很多拦截器，所以这应该是你的起点。

我相信您正在使用 ra-data-simplerest 作为示例的基础（或者是其他什么？），您可以根据以下内容将 getList 覆盖为更适合您需要的内容实施：

import { fetchUtils } from 'react-admin';
import { stringify } from 'query-string';

import simpleRestDataProvider from './simpleRestDataProvider';

const apiUrl = 'https://my.api.com/';
const httpClient = fetchUtils.fetchJson;

const dataProvider = {
    ...simpleRestDataProvider,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)}`;

        return httpClient(url).then(({ headers,json }) => ({
            data: json,total: parseInt(headers.get('content-range').split('/').pop(),10),}));
    },}