reactjs上的2个过滤器合二为一

Question

我遇到了这个麻烦，我做了 2 个不同的过滤器 一种过滤选定类别的过滤器，另一种过滤日期选择器上的日期 但我需要他们在这种情况下合二为一 1.-您只想按所选类别进行过滤 2.-您只想按日期过滤 3.- 您想按类别和日期进行筛选

我按类别过滤的方式是这个，它有效

filterData = (data) =>{
return data.filter((value,index)=>{
  if (this.state.filterSelected.indexOf(value.category)>-1) {
        return(value)
      }
})

}

烤盘看起来像这样

<Griddle
data={this.state.filterSelected.length === 0  ? data : this.filterData(data)}
pageProperties={{
  pageSize: 100,
}}
plugins={[plugins.LocalPlugin]}
components={this.state.filterOptions}

/>

我按日期过滤的方式看起来像这样，它也可以工作

 filterData = (data) =>{
  return data.filter((value,index)=>{
   if (this.state.dateSelected === value.time) {
      return(value)
    }
  })
}

烤盘看起来像这样

    <Griddle
    data={this.state.dateSelected ==='' ? data : this.filterData(data)}
    pageProperties={{
      pageSize: 100,
    }}
    plugins={[plugins.LocalPlugin]}
    components={this.state.filterOptions}
  />

它们都是分开工作的，我知道它更多的是一个逻辑问题，而不是我为过滤数据找到这个解决方案 但我不知道如何在烤盘上传递勇气，我会感谢一些帮助

  filterData = (data) =>{
    return data.filter((value,index)=>{
     if (
          (this.state.filterSelected.length>0 && 
          this.state.filterSelected.indexOf(value.category)>-1 && 
          this.state.dateSelected !='' && this.state.dateSelected(value.time)>-1)||
          (this.state.filterSelected.length==0 && 
          this.state.dateSelected !='' && this.state.dateSelected(value.time)) ||
          (this.state.filterSelected.length>0 && 
          this.state.filterSelected.indexOf(value.category) && 
          this.state.dateSelected =='')
         ){
        return(value)
      }
    })
  }

Answer 1

在您的渲染中设置一个等于所有数据的变量，然后添加两个过滤器。例如：

render() {
  let filteredData = data;
  if (filterByDate) filteredData = this.filterByCategory(filteredData);
  if (filterByCategory) filteredData = this.filterByCategory(filteredData);

  return (
    <Griddle
      data={filteredData.length === 0 ? data : filteredData}
      pageProperties={{
        pageSize: 100,
      }}
      plugins={[plugins.LocalPlugin]}
      components={this.state.filterOptions}
    />
  );
}