API调用后，React / Flux seState不重新渲染组件

Question

我正在调用一个API，该API允许您按不同的参数（例如top，latest，popular等）对返回的数据进行排序。 我要实现的是，当用户单击按钮以按其他参数排序时，状态将更改为新参数，并且使用该新参数再次调用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>
    );
}

单击该按钮后，没有任何东西会重新呈现。 我想念的是什么？

Answer 1

反应通话componentWillMount只是一次在部件安装，所以逻辑人不会被更新的状态变化再次执行。

查看React文档 ，以更好地了解React licecycle钩子如何工作。