react中的setState在react组件中不起作用

Posted

技术标签:

【中文标题】react中的setState在react组件中不起作用【英文标题】:setState in react is not working in react component 【发布时间】:2016-12-27 07:22:40 【问题描述】:

我正在尝试创建一个小型反应组件,但是我无法设置状态。下面是我的代码。在_onChange 函数中,我试图将一个长度为10 的数组设置为State 和console.log 相同。我在控制台中得到一个空数组。

var Home = React.createClass(

    getInitialState: function () 
        return (
            reviewData: []
        );
    ,

    componentWillMount: function() 
        ReviewStore.addChangeListener(this._onChange);
        ReviewAction.getRatings();
        console.log(this.state.reviewData);
    ,

    _onChange: function() 
        var res = ReviewStore.getRating();
        console.log(res); //Here I am getting array of length 10
        this.setState(reviewData: ReviewStore.getRating());
        console.log(this.state.reviewData); //Here I am getting array of length 0
    ,

    componentWillUnmount: function () 
        ReviewStore.removeChangeListener(this._onChange);
    ,

    ratingChanged : function(newRating) 
        console.log(newRating)
    ,

    render: function() 
        return(
            <div>
                <h2>Rating of Arlo Smart Home 1 HD Camera</h2>
                <hr/>
                <h4>Average Rating: </h4><ReactStars half=false onChange=this.ratingChanged size=24/>
            </div>
        )
    
);

【问题讨论】:

【参考方案1】:

setState 是异步的。该值不会立即设置。您可以将回调传递给setState,它将在设置新状态时调用。

来自反应文档https://facebook.github.io/react/docs/component-api.html

setState() 不会立即改变 this.state 而是创建一个挂起的状态转换。调用此方法后访问 this.state 可能会返回现有值。

您可以更改您的代码

this.setState(reviewData: ReviewStore.getRating(), function () 
    console.log(this.state.reviewData)
);

【讨论】:

以上是关于react中的setState在react组件中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

React 3 - setState()

如何知道所有 setState 更新是不是已应用于 React 组件中的状态?

react的this.setState中的坑

React 组件中的state和setState

redux store dispatch 导致 React 中的 setState error()

[react] react中的setState缺点是什么呢?