Как я могу выполнить несколько фильтров друг над другом в react-admin? - PullRequest
Новая
       4

Как я могу выполнить несколько фильтров друг над другом в react-admin?

1 голос
/ 08 мая 2020

Я использую react-admin для управления панелью администратора для моего API Firebase. В настоящее время я пытаюсь добавить несколько фильтров на панель администратора, которые включают поиск, подтвержденный адрес электронной почты и другие. Я написал несколько фильтров как таковых 

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. Как мне это сделать?

1 Ответ

1 голос
/ 08 мая 2020

Результаты фильтрации зависят от конечной точки api, которую вы предоставляете для dataProvider prop.

Когда вы пытаетесь отфильтровать - скажем, username равно bret, делается запрос (вы можете проверить вкладку n / w) с параметрами запроса. Например, вот так:

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

Итак, ваш бэкэнд прочитает параметры и вернет отфильтрованные результаты. В вашем случае конечная точка api всегда делает OR, а не AND. Отсюда проблема.

Один из способов решения - просто настроить бэкэнд, который возвращает AND результатов.

Другой способ - расширить 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
    ...

См. исходный код getList , чтобы скопировать код функции и настроить его в соответствии с вашими потребностями

...