过滤多个键上的对象数组答案

【问题标题】：Filter array of objects on multiple keys过滤多个键上的对象数组
【发布时间】：2019-09-25 00:19:58
【问题描述】：

我有一个反应表，我正在尝试使用过滤器功能对多个列进行过滤。如果我在一个列上过滤它很好，但如果我添加另一列它只过滤而不是两者。例如名字“Scott”。我想用它过滤 first_name 列，也用它过滤 biz_name 列。但是，当我选中该框以更改该列的状态时，它只会过滤一个。这是我检查状态以确保其正常工作的复选框。

                           <Checkbox
                                label="Business Name"
                                onCheck={event => {
                                  if (event.target.checked) {
                                    this.setState({
                                      filterBusinessName: true
                                    });
                                  } else {
                                    this.setState({
                                      filterBusinessName: false
                                    });
                                  }

                                }}
                              />
                              <Checkbox
                                label="First Name"
                                onCheck={event => {
                                  if (event.target.checked) {
                                    this.setState({
                                      filterFirstName: true
                                    });
                                  } else {
                                    this.setState({
                                      filterFirstName: false
                                    });
                                  }

                                }}
                              />

然后这里是表格上方的过滤函数：

let items = this.state.contacts


      if (this.state.term && items.length > 0) {
        let searchTerm = this.state.term.toLowerCase()
        items = items.filter(row => {

          if(this.state.filterBusinessName && row.biz_name){ 

              return row.biz_name.toLowerCase().includes(searchTerm)

          }

          if(this.state.filterFirstName && row.first_name){ 

            return row.first_name.toLowerCase().includes(searchTerm)

          }

          if(this.state.filterFirstName && row.first_name && this.state.filterBusinessName && row.biz_name){ 

            return row.first_name.toLowerCase() == searchTerm || row.biz_name.toLowerCase() == searchTerm

          }


        })
      }

【问题讨论】：

直接使用布尔值来节省一些重复的逻辑：this.setState({ filterBusinessName: event.target.checked });

标签： reactjs filter react-table

【解决方案1】：

我想你想要这样的东西

let items = this.state.contacts;

if (this.state.term && items.length > 0) {
  let searchTerm = this.state.term.toLowerCase();
  items = items.filter(row => {
    if (
      this.state.filterBusinessName &&
      row.biz_name &&
      row.biz_name.toLowerCase().includes(searchTerm)
    ) {
      return true;
    }

    if (
      this.state.filterFirstName &&
      row.first_name &&
      row.first_name.toLowerCase().includes(searchTerm)
    ) {
      return true;
    }

    return (
      this.state.filterFirstName &&
      row.first_name &&
      this.state.filterBusinessName &&
      row.biz_name &&
      (row.first_name.toLowerCase() == searchTerm ||
        row.biz_name.toLowerCase() == searchTerm)
    );
  });
}

这里的主要区别是函数只有在不匹配时才会返回 false。如果它与过滤器检查之一不匹配，则在它立即返回 false 之前。

您肯定可以进行一些优化以使其更易于理解。但它说明了这个想法。希望有帮助

【讨论】：

这很好用。我还有其他一些专栏，所以这可能会有点冗长。我确实必须更改最后一个或语句以跳过空白的 || row.biz_name && row.biz_name.toLowerCase() == searchTerm
是的，你肯定想要重构它；特别是如果您打算增加复杂性。但正如您所了解的，只有当它们都评估为 false 时才返回 false，那么您就是金子 :)