Фильтр для поискового ввода в React.js - PullRequest
Новая
       25

Фильтр для поискового ввода в React.js

0 голосов
/ 30 октября 2019

Я пытаюсь создать фильтр для поиска с помощью React. У меня есть массив fournisseurs с объектом внутри, например: 

fournisseurs: [
    {
      'id'              : '0',
      'codeFournisseur' : '2222222',
      'categorie'       : 'sdfgsdfg',
      'statusJuridique' : 'sdfgdfhs',
      'raisonSociale'   : 'sdfhdhs',
      'typeReglement'   : 'sdhgdfhdf',
      'delaiReglement'  : 'sdhfgdhs',
      'franco'          : 'sdfhsdh',
      'fraisDePort'     : 'sdhhsdhf',
      'adresse'         : 'sdfhsdfh',
      'codePostal'      : 'sfdgsdfgsdfg',
      'ville'           : 'sdgsd',
      'pays'            : 'France',
      'telephone'       : '+333333333333',
      'mail'            : 'dfxgdf@sdhgdfh.fr',
      'siteInternet'    : 'http://www.sdfgsdfhs.fr',
      'tvaIntracomm'    : 'sdfhsdghsdgh'
    }
]

Проблема в том, что я не могу выполнить поиск по всему объекту. Я могу искать только по одному элементу (raisonSociale здесь) объекта, например: 

useEffect(() => {
        setData(searchText.length === 0 ? fournisseurs : _.filter(fournisseurs, fournisseur => fournisseur.raisonSociale.toLowerCase().includes(searchText.toLowerCase())))
    }, [fournisseurs, searchText]);

Может ли кто-нибудь мне помочь, если можно будет использовать оператор распространения в методе фильтра или что-то подобное для извлечения всехэлементы объекта из поиска?

1 Ответ

0 голосов
/ 30 октября 2019

Попробуйте, я добавил два новых ключа, которые вы также можете искать 

useEffect(() => {
    setData(searchText.length === 0 ? fournisseurs : {
       _.filter(fournisseurs, fournisseur => 
         return fournisseur.raisonSociale.toLowerCase().includes(searchText.toLowerCase()) ||
                fournisseur.typeReglement.toLowerCase().includes(searchText.toLowerCase()) ||
                fournisseur.delaiReglement.toLowerCase().includes(searchText.toLowerCase())
      )
    })
}, [fournisseurs, searchText]);
...