复杂数组过滤条件答案

【问题标题】：Complex array filtering conditions复杂数组过滤条件
【发布时间】：2019-08-16 03:50:22
【问题描述】：

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

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

我假设我知道问题出在哪里。在当前的形状中，我的脚本总是过滤存储在 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 个过滤器和原始数据（如果用户自然删除了所有过滤器）

【问题讨论】：

标签： javascript arrays reactjs filter

【解决方案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 功能。

【讨论】：