Question

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

1.Button roller显示所有正在滚动的人 2.Buttons non-rollers显示懒惰的人不会滚动。 3.Buttons全部显示所有滚筒和非滚筒。

我试图弄清楚是否有任何方法可以使用相同的filterRollers（）函数显示所有滚轴。我理解只是将rollingData的状态重置回另一个函数中的原始值就行了但我试图限制使用一个函数。我将不胜感激任何关于最佳实践的建议。谢谢

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>

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

1 个答案: