2
戻り値のデータをトップ、最新、人気などの異なるパラメータで並べ替えるAPIを呼び出しています。私が達成しようとしているのは、ユーザーがボタンをクリックして別のパラメーターでソートすると、状態が新しいパラメーターに変更され、その新しいパラメーターでAPIが再度呼び出されるということです。ここに私のコードがあります:React/Flux seStateはAPI呼び出し後にコンポーネントを再レンダリングしません
constructor(){
super();
this.state = {
sortType: 'top' //default is to sort by Top
};
this.setSortType = this.setSortType.bind(this);
}
componentWillMount(){
//this retrieves sourceName which is required to make the API call
const parsed = queryString.parse(this.props.location.search);
var sourceName = parsed.sourceId;
//getArticles below is the action that makes the API call with sourcename and sortType as parameters
newsActions.getArticles(sourceName,this.state.sortType);
newsStore.on('articles_change',this.fetchNewsArticles);
}
//Call to setState when user clicks button change sort parameter
setSortType(){
this.setState({
sortType:'latest'
});
}
render() {
return (
<div>
... //logic to display data from the API call
<button onClick={this.setSortType}> Sort By Latest </button>
</div>
);
}
ボタンをクリックすると何も再描画されません。私は何が欠けているのですか?