Question

我有一个项目数组，可以通过三个选择下拉列表进行过滤。一旦用户选择了一个选项，该选项将以组件状态通过商店传递。我只是不知道如何处理其中一个过滤器选项为空并且传递了一个空过滤器选项的情况。我也想有选择显示全部而忽略过滤器。我只是使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)

Answer 1

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

.methodSelect, .urlBox, .goButton{ vertical-align:top }

要用语言描述它，您希望每个传递的项目对于每个过滤器都有效。要使用过滤器进行验证，过滤器必须允许所有（为空），或者项目必须与过滤器匹配。

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

1 个答案: