Как сделать поиск по каждому столбцу?

Question

[Mesuti]

Есть таблица с поиском по каждому столбцу и общий поиск.

Почему не работает скрипт поиска?
Вроде все логично оформил.

Каждый input сохраняется в state, чтобы следующий input искал по предыдущим результатам.
Почему-то не работает данный скрипт:

dataHave.map(item => { // перебор массива объектов, где ищем слова
      for (let key in searchHave) {  // перебор каждого input для поиска
        JSON.stringify(item) // объект из массива для поиска превращаем в строку
          .toUpperCase()
          .indexOf(searchHave[key].toUpperCase()) > -1 // поиск каждого input
          ? filteredData.push(item) // если вхождения найдены - сохраняем элемент в новый массив 
          : false;
      }
    });

Песочница
state.data - массив для вывода на страницу
state.json - получаемый массив с сервера
state.search - объект с input для поиска

Answer 1

[0xD34F]

Продублированы данные - зачем? Пусть результат поиска будет изначально пуст, выполняйте поиск после создания экземпляра компонента. Чтобы не пришлось дублировать код поиска, разделите метод на два: один обновляет значения для поиска, другой выполняет собственно поиск и вызывается в двух местах - в componendDidMount и после обновления объекта значений для поиска.

Стейт обновляется асинхронно, так что сразу после вызова setState вы не увидите в стейте только что обновлённое значение и будете выполнять поиск по старому. Вторым параметром в setState можно передать функцию, которая будет выполнена после обновления стейта - передавайте метод поиска. Или же, в componentDidUpdate проверяйте, что текущий объект поиска не равен предыдущему и в этом случае вызывайте метод поиска.

Конвертация в json - зачем?

Почему любая успешная проверка приводит к помещению элемента данных в массив результатов поиска? Так результаты будут дублироваться - скольким значениям из объекта поиска соответствует элемент данных, столько раз он будет помещён в массив результатов. Надо убедиться, что элемент данных соответствует всем значениям из объекта поиска, и только после этого помещать его в массив результатов.

Значение общего поиска должно обрабатываться в особом порядке - надо проверять его соответствие любому из свойств элемента данных.

https://jsfiddle.net/vLk97n6y/1/