отображение нескольких фильтров React Js

Question

пишу поиск объектов с несколькими фильтрами. Два фильтра выполняют следующие проверки:

1) кто-то назначен к случаю (caseWorkers) 2) присутствует ли этот тип документа (resoStatus)

Я написал лицевую часть фильтр, который работает следующим образом:

если пользователь щелкает имя для поиска caseWorkers ("firstName lastName"), он проходит через него и завершает строку с этим именем в массиве, называемом фильтрами на странице, где поиск выполняется

, если пользователь нажимает на документы, которые он помещает в тот же массив строк «hasRepresentation» «hasTaxForms».

Модель, в которой выполняется поиск (перспектива), выглядит примерно так:

{
fullName: '',
resoStatus:{
representation:[],
federalReso:[],
},
caseWorkers:{
originators:[],
taxPreparers:[]
}
} 

, поэтому есть массив объектов, который выглядит так, и массив строк, называемых фильтрами с именами или истинными ложными оценками.

filters = ["Mickey Gray", "hasRepresentation"]

, поэтому мне нужно сопоставить фильтры ищите определенные аспекты строки / has / or '', а затем отображайте фильтрацию перспектив по подмассивам в caseWorkers и resoStatus.

У меня есть У меня очень четкое понимание того, что я хочу, но я не могу понять, как расположить все различные массивы, которые необходимо учитывать. Вот самая последняя версия кода реакции.

  {(filters.length > 0 && prospects.length > 0 && prospect.caseWorkers) ||
        (filters.length > 0 && prospects.length > 0 && prospect.resoStatus)
          ? prospects.filter(
              (prospects, filters, i) =>
                prospects[i].caseWorkers.originators.name ===
                filters
                  .map((filter) => filter.includes(" "))
                  .map((filtered) => (
                    <ProspectItem
                      key={filtered._id}
                      filtered={filtered}
                      prosp={prosp}
                    />
                  ))
            )
          : prospects.map((prospect) => (
              <ProspectItem
                key={prospect._id}
                prospect={prospect}
                prosp={prosp}
              />
            ))}

это еще один метод, который я рассмотрел для сопоставления фильтров, чтобы найти часть потенциальных клиентов.

        {(filters.length > 0 && prospects.length > 0 && prospect.caseWorkers) ||
        (filters.length > 0 && prospects.length > 0 && prospect.resoStatus)
          ? filters.map((filter) =>
              prospects
                .find((prospect) => prospect.caseWorkers.name === filter)
                .map((filtered) => (
                  <ProspectItem
                    key={filtered._id}
                    filtered={filtered}
                    prosp={prosp}
                  />
                ))
            )
          : prospects.map((prospect) => (
              <ProspectItem
                key={prospect._id}
                prospect={prospect}
                prosp={prosp}
              />
            ))}

как сложить несколько фильтрует и оценивает значения для карты в нескольких разделах одного и того же объекта.

Answer 1

Итак, я не полностью понимаю вопрос, но я думаю, что важно понять, что в рамках реакции вы также можете использовать обычные javascript переменные. Необязательно все формулировать в виде выражения, также можно использовать операторы.

EG

const MyComponent = ({items, filters})=>{
    const processedFilters = processFilters(filters); // returns filter functions for instance
    const filteredItems = filters.reduce((items, filter)=>filter(items), items);
    return <div>
        {filteredItems.map(item=><div>{item.something}</div>)}
    </div>;
}

в этом случае processFilters может выглядеть примерно так:

function processFilters(filters){
    return filters.map(filter=>{
        if(filter.match(/^has/)) 
            return item=>item[filter];
        else if(filterMatchesSomeCondition(filter)) 
            return item=>checksSomethingElse(filter, item);
    })
}

Эта нотация может быть не самым интуитивно понятным способом решения задач, поэтому этот код дает примерно то же самое, и может быть легче следовать:

const MyComponent = ({items, filters})=>{
    for(let filter of filters){
        if(filter.match(/^has/)) 
            items = items.filter(item=>item[filter]==true);
        else if(filterMatchesSomeCondition(filter)) 
            items = items.filter(item=>checksSomethingElse(filter, item));
    }
    return <div>
        {items.map(item=><div>{item.something}</div>)}
    </div>;
}

Я надеюсь, что эта информация будет полезна. Если нет, я рад помочь, если вы сможете сформулировать проблему немного более абстрактно.

Также я не уверен, что форматирование фильтров как строк является лучшей идеей, поскольку это довольно неоднозначно. Что-то простое, например массив объектов, вроде этого:

[{type: "hasName", value: "John"}, {type:"hasMaxSomething", value:3}]

, уже поможет облегчить понимание целей фильтров. Это также может предотвратить ошибки, поскольку вы сможете передавать больше данных для фильтра без необходимости кодировать что-то странным образом.