javascript - 通过列表过滤以根据用户任务的状态显示数据

Question

我正在尝试过滤数组并根据单击事件显示数据。共有三个按钮控制不同的操作。

1.按钮滚轮显示所有正在滚动的个人2.非滚轮按钮显示不滚轮的懒惰窥视。3.Buttons All 显示所有滚轮和非滚轮。

我试图弄清楚是否有任何方法可以显示具有相同 filterRollers() 函数的所有滚轮。我知道只需在不同的函数中将 rollData 的状态重置回原始值就可以解决问题，但我试图限制使用一个函数。我将不胜感激任何有关最佳实践的建议。谢谢

var data =[
    {  name="adam", task="roll" ,isrolling=true},
    {  name="jack", task="roll" ,isrolling=false},
    {  name="r2d2", task="roll" ,isrolling=true},
    {  name="spidy", task="roll" ,isrolling=false}

]

this.state={
    rollingState=data,
    rollingData=data
}   

filterRollers(status) {
    let list = this.state.rollingState.filter(roll => {
        return roll.isrolling === status
    })

    this.setState({
        rollingData:list
    })   
}   

render(){
    return(
        <div>
            <button onClick={this.filterRollers(true)}>rollers </button>
            <button onClick={this.filterRollers(false)}>non-rollers </button>
            <button onClick={this.filterRollers(something)}> All </button>


            {this.state.rollingData.map(roll=>{
                return <Something roll={roll}/>
            }

            )}
            </div>  

    )
}

Answer 1

当你想显示所有的滚轮时，你可以直接调用该函数，不带任何参数。然后在 filterRollers 函数的开头，您可以检查参数是否未定义。如果是，则返回所有数据。如果没有，则过滤:

filterRollers(status) {
  let list;
  if(typeof status !== 'undefined'){
    list = this.state.rollingState.filter(roll => {
      return roll.isrolling === status
    })
  } else{
    list = data.slice();
  } 
  this.setState({
    rollingData:list
  })
}  

当你想显示所有的滚轮时，调用这样的函数:

 <button onClick={this.filterRollers()}> All </button>