Условия фильтрации сложных массивов

Question

Я строю легкий MS Excel на основе React.В настоящее время я строю систему фильтрации, которая позволит фильтровать строки на основе входных данных фильтра - каждая для каждого столбца.Это работает нормально, если вы фильтруете только по одному столбцу.

Проблема: Если я решу фильтровать по более чем одному столбцу, новейшая фильтрация имеет приоритет и игнорирует все предыдущие, как будто их там не было.

Полагаю, я знаю, в чем проблема.В текущей форме мой скрипт всегда фильтрует данные, хранящиеся в массиве preSearch, который всегда хранит старые исходные данные (const).Я попытался выполнить цикл по всем входам фильтра, но мне не удалось объединить все условия, используя && в методе Array.prototype.filter ().

После нажатия кнопки поиска переключения этогенерируется:

showSearchInputs() {
    if (this.state.toggleSearch === true) {
      return (
        <tr onChange={(e) => this._searchData(e)}>
          {
            this.props.headers.map((a, b) => {
              return (
                <td key={b}><input data-idx={b} type="text" style={{fontSize: '11px', width: '150px'}} /></td>
              )
            })

          }
        </tr>
      )
    }
    else {
      return null
    }
  }

А затем есть метод, который прослушивает изменение данных:

  _searchData(e) {
    console.log(e.target.dataset.idx, e.target.value);
    if (!e.target.value.toLowerCase()) {
      //restore full old data
      this.setState({
        data: this.preSearch
      })
      return
    }
    else {
      var idx = e.target.dataset.idx 
      var searchdata = this.preSearch.filter(row => {
        return row[idx].toString().toLowerCase().indexOf(e.target.value.toLowerCase()) > -1
      })

      this.setState({
        data: searchdata,
      }) 
    }
  }

Ожидаемый результат: фильтры перекрываются (накапливаются), в настоящее время новейший фильтр имеет приоритет Удаление символовиз входных данных фильтра также обновляет результат и нацеливается на фильтры 0 и исходные данные, которые должны отображаться (если пользователь удаляет все фильтры естественным образом)

Answer 1

Хорошо, я понял это.

Мой предыдущий подход был о мониторинге изменений внутри строк фильтра, но учитывалось только последнее изменение. И это была проблема.

Я решил немного изменить метод фильтрации. Я добавил дополнительное свойство состояния, в котором хранятся все изменения фильтра, и по умолчанию я установил их на "", так как метод фильтра не работает с null или undefined:

this.state = {
    filters: ["", "", "", "", ""]
} 

Теперь, каждый раз, когда пользователь вводит свой фильтр в определенный столбец, this.state.filters обновляется. В то же время внутри того же метода я также фильтрую данные на основе этого фильтра. Если все поля пусты, я восстанавливаю исходные данные.

Чтобы иметь многомерную, перекрывающуюся фильтрацию, мне пришлось обратиться к SO за решением, так как я не мог объединить несколько логических выражений в выражении return. Я получаю свой ответ под этим постом:

Как вернуть логические значения, объединенные с && внутри функции обратного вызова в методе фильтра?

Использование Array.prototype.every() для проверки соответствия всех элементов условию обратного вызова и Array.prototype.includes() для проверки, содержат ли они элемент из массива фильтров. Мне удалось это сделать. Обратите внимание, что Array.prototype.includes() является функциональностью ES6.