复杂的数组过滤条件

Question

我正在构建基于React的轻量级MS Excel。我目前正在构建一个过滤系统，允许根据过滤器输入过滤行 - 每列都有一个过滤行。如果只过滤一列，它可以正常工作。

问题：如果我决定基于超过1列的过滤，最新的过滤优先，忽略所有以前的过滤，就像它们不存在一样。

我想我知道问题是什么。在当前形状中，我的脚本总是过滤存储在preSearch数组中的数据，该数据总是存储旧的原始数据（const）。我尝试在所有过滤器输入中执行循环，但是我无法使用&& inside 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语句中组合多个布尔值。我在这篇文章中得到了答案：

How to return booleans joined with && inside callback function in filter method?

使用Array.prototype.every()检查所有项是否符合回调条件和Array.prototype.includes()以检查它们是否包含过滤器数组中的元素我设法做到了。请注意，Array.prototype.includes()是ES6功能。