如何更改 React-Admin 过滤器答案

【问题标题】：How to change React-Admin filters如何更改 React-Admin 过滤器
【发布时间】：2021-06-07 15:06:39
【问题描述】：

我是 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

如何更改该端点？

【问题讨论】：

标签： reactjs react-admin

【解决方案1】：

在发送之前修改请求（以及接收到响应之后）的地方是 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),
        }));
    },
}

【讨论】：