Question

我有一个选择框，需要调用ajax请求从服务器带来新数据。

class Dashboard extends React.Component {
constructor(){
    super();
    this.state = {
        'dayFilter': "last_day"
    }
}

componentDidMount() {
  this.getCurrentCampaign();
};

// get current channels
getCurrentCampaign(){
  client.get('channels', {params: {day_filter: this.state.dayFilter}}).then(res =>{
    this.setState({
      oCurrentCampaign: res.data
    });
  })
};

selectDayFilter(selectedSelect){
  this.setState({'dayFilter': selectedSelect.value});
};


render(){
    return (
        <div className="_dashboard ng-enter ui-view">
            <div className="section">
                <h2>Current Channels</h2>
                <Select value={this.state.dayFilter} className="se_type1" name="form-field-name" searchable={false} options={options}
                onChange={this.selectDayFilter.bind(this)}/>
                <CurrentCampaign oCurrentCampaign={oCurrentCampaign}/>
            </div>

        </div>
    );
}

只要用户从select中选择不同的选项然后状态就会被设置，

selectDayFilter就会被调用

  this.setState({'dayFilter': selectedSelect.value});

调用getCurrentCampaign的最佳方式是什么，可以从服务器中提取过滤后的数据？

Answer 1

我建议的流程应该是这样的：

用户键入某些东西然后onChange触发selectDayFilter函数

//Pseudocode 
selectDayFilter(
 setState "dayFilter"
 call getCurrentCampaign // ajax request
)

getCurrentCampaign(){
 if ajax.success{
 setstate "oCurrentCampaign" // it will trigger re-vender
 }
}

希望有所帮助

Answer 2

因为每次选择更改时都需要获取数据。我猜你可以把你的getCurrentCampaign作为回调函数传递给This.setState。像：

this.setState({'dayFilter': selectedSelect.value}, this.getCurrentCampaign);

或者你可以把它放在组件里面来更新并检查dayFilter是否在下一个状态下发生了变化。

但我不确定哪种方法最好。希望它有所帮助。

React在select chage上调用Ajax请求

2 个答案: