过滤多个键上的对象数组

Question

我有一个反应 table，我正在尝试使用过滤功能过滤多列。如果我在一列上过滤它很好，但如果我添加另一列，它只过滤那个而不是两个。例如名称 "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
                                    });
                                  }

                                }}
                              />

然后是table上面的过滤函数：

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

          }


        })
      }

Answer 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)
    );
  });
}

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

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

过滤多个键上的对象数组

Filter array of objects on multiple keys

filter

reactjs

react-table