仅对定义的参数过滤数组。 忽略空参数

Question

i have an array of projects, which can be filtered by three select dropdowns. once the user selects an option the option will be passed in the components state through the store. i just dont know how to handle the cases where one of the filter options is empty and an empty filter option is passed. also i would like to have the option to show all and ignore the filter. I just get the or logic to work like to be able to only filter for years and if i filter places or types the years already set getting ignored but i would also like to filter all three.

export class Projects extends React.Component {



constructor(props) {
    super(props);
    autoBind(this);
    this.state = {
      initialItems: props.data.projects.edges,
      items: null,
      filterPlace: '',
      filterYear: '',
      filterType: '',
    };
    this.placesOptions = new Set();
    this.yearsOptions = new Set();
    this.typesOptions =  new Set();
  }

  componentWillMount(){
    const { initialItems } = this.state
    this.setState({items: initialItems})

    initialItems.map((item) => {
      this.placesOptions.add(item.node.categories_names[0].name)
      this.yearsOptions.add(item.node.categories_names[1].name)
      this.typesOptions.add(item.node.categories_names[2].name)
    })
  }

  // TODO: FIX BUG ON RELOAD ALL EMPTY
  componentDidUpdate(prevProps) {
    if (prevProps !== this.props) {
      this.filterProjects()
    }
  }

  filterProjects(){
    const { filterPlace, filterYear, filterType } = this.props;
    let updatedList = this.state.initialItems;
    updatedList = updatedList.filter((item) => {
      const itemFilterCategory = item.node.categories_names
      const placeQueryString = itemFilterCategory[0].name.toString().toLowerCase()
      const yearQueryString = itemFilterCategory[1].name.toString().toLowerCase()
      const typeQueryString = itemFilterCategory[2].name.toString().toLowerCase()
      return (
        filterPlace !== "" && placeQueryString.search( filterPlace.toLowerCase()) !== -1 ||
        filterYear !== "" && yearQueryString.search( filterYear.toLowerCase()) !== -1 ||
        filterType !== "" && typeQueryString.search( filterType.toLowerCase()) !== -1
      )
    });
    this.setState({items: updatedList});
  }

  render() {
    const { location, data } = this.props;
    const { items } = this.state;
    const { page } = data;
    return (
      <MainLayout location={location}>
        <TopNavigation />
        <Header
          siteBrand={config.siteBrand}
          siteSubtitle={page.title}
          isProjectArchive
        />
        <ConnectedProjectFilter
          changeHandlerSearch={(e) => this.searchProjects(e)}
          placesOptions={this.placesOptions}
          yearsOptions={this.yearsOptions}
          typesOptions={this.typesOptions}
        />
        <ProjectArchiveListing projects={items} />
      </MainLayout>
    )
  }
}


const mapStateToProps = state => ({
  filterPlace: state.filterPlace,
  filterYear: state.filterYear,
  filterType: state.filterType,
});


const mapDispatchToProps = dispatch => ({});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Projects)

Answer 1

If you want any empty input to match (pass through) every item then I believe this is the condition you want:

(filterPlace === "" || placeQueryString.search( filterPlace.toLowerCase()) !== -1) &&
 (filterYear === "" || yearQueryString.search( filterYear.toLowerCase()) !== -1) &&
 (filterType === "" || typeQueryString.search( filterType.toLowerCase()) !== -1)

To describe it in words, you want each passing item to be valid with respect to every filter. To validate with a filter the filter must allow all (be empty) or the item must match the filter.