Javascript 仅为定义的参数设置筛选器数组。忽略空参数

我有一系列的项目，可以通过三个选择下拉列表进行筛选。一旦用户选择一个选项，该选项将以组件状态通过存储区传递。我只是不知道如何处理其中一个过滤器选项为空并且传递了一个空过滤器选项的情况。此外，我想有选项显示所有和忽略过滤器。我只是让or逻辑工作起来，就像只能够过滤几年，如果我过滤位置或类型，已经设置的年份会被忽略，但我也希望过滤所有三个

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)

导出类项目扩展React.Component{
建造师（道具）{
超级（道具）；
自动绑定（本）；
此.state={
初始项：props.data.projects.edges，
项目：空，
filterPlace:“”，
过滤耳：“”，
筛选器类型：“”，
};
this.placesOptions=新集合（）；
this.yearsOptions=新集合（）；
this.typesOptions=新集合（）；
}
组件willmount（）{
const{initialItems}=this.state
this.setState（{items:initialItems}）
initialItems.map（（项目）=>{
this.placesOptions.add（item.node.categories\u name[0].name）
this.yearsOptions.add（item.node.categories_name[1].name）
this.typesOptions.add（item.node.categories\u name[2].name）
})
}
//TODO:修复重新加载所有空文件时的错误
componentDidUpdate（prevProps）{
if（prevProps！==此.props）{
this.filterProjects（）
}
}
筛选项目（）{
const{filterPlace，filterYear，filterType}=this.props；
让updatedList=this.state.initialItems；
updatedList=updatedList.filter（（项）=>{
const itemFilterCategory=item.node.categories\u名称
const placeQueryString=itemFilterCategory[0]。名称。toString（）。toLowerCase（）
const yearQueryString=itemFilterCategory[1]。名称。toString（）。toLowerCase（）
常量typeQueryString=itemFilterCategory[2]。名称。toString（）。toLowerCase（）
返回(
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}=数据；
返回(
本项目（e）}
placesOptions={this.placesOptions}
yearsOptions={this.yearsOptions}
typesOptions={this.typesOptions}
/>
)
}
}
常量mapStateToProps=状态=>({
filterPlace:state.filterPlace，
filterYear:state.filterYear，
filterType:state.filterType，
});
常量mapDispatchToProps=dispatch=>（{}）；
导出默认连接(
MapStateTops，
mapDispatchToProps
)（项目）

如果您想要任何空输入匹配（传递）每个项目，那么我相信这就是您想要的条件：

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

---

要用文字来描述它，您希望每个传递的项对于每个筛选器都有效。要使用筛选器进行验证，筛选器必须允许all（为空）或项必须与筛选器匹配。

为什么不使用

if（）

语句来检查输入是否为空？嘿@JossClassey我已经想过了，但是我必须使用多个if语句来检查不同的组合，代码会变得一团糟。比如说如果filterPlace返回。。。如果filterPlace&&filterYear返回。。。如果filterPlace&&filterYear&&filterType返回。。。你明白了，哈哈。我只是觉得必须有一个更聪明的方法。我有点困惑于你想要实现什么。如果任何道具为空，是否希望代码运行？@JossClassey否。我只希望它在至少一个道具具有值时运行。所以基本上是一个多重过滤器。它可以过滤一个属性，但也可以过滤多个属性。非常感谢。它正在工作：）。谢谢你的描述，它帮助我理解了这个问题。我在这里买了一个新的。很不幸，我不能推翻你的答案。