如何在react-admin中互相执行多个过滤器？

Question

我正在使用react-admin来管理我的Firebase API的管理控制台。目前，我正在尝试向管理控制台添加多个过滤器，包括搜索，已验证的电子邮件等。我已经写了多个过滤器]

const UserFilter = (props) => (
  <Filter {...props}>
    <TextInput label="Search" source="phoneNumber" alwaysOn />
    <BooleanInput label="Email Verified" source="emailVerified" alwaysOn/>
  </Filter>
);

并将其用作

<List {...props} filters={<UserFilter />} />

但是当我尝试过滤时，这些过滤器不会相互叠加使用。它们被用作OR。因此，如果我使用两个过滤器，则结果将是其中一个与两个同时出现的结果。我希望将滤镜应用为AND。我该怎么办？

Answer 1

您的过滤器结果取决于您提供给dataProvider道具的api端点。

[当您尝试进行过滤时-假设username等于bret，则使用查询参数发出请求（您可以检查n / w选项卡）。例如，像这样：

https://jsonplaceholder.typicode.com/users?_end=10&_order=ASC&_sort=id&_start=0&username=bret

所以您的后端将读取参数并返回过滤后的结果。在您的情况下，您的api端点始终执行OR而不是AND。因此，问题。

一种解决方法是简单地调整返回AND结果的后端。

其他技巧是extend the DataProvider和重写getList函数，并根据您的要求处理api结果。

import simpleRestProvider from 'ra-data-simple-rest';

const dataProvider = simpleRestProvider('http://path.to.my.api/');

const myDataProvider = {
    ...dataProvider,
    getList: (resource, params) => {
        // custom getList function
    ...

请参见source code of getList复制功能代码并根据需要进行调整