ComponentWillMount不设置状态React JS

时间:2016-07-21 10:37:34

标签: reactjs

为什么这不起作用:

class Slider extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            top : 0,
            responsiveImg : ""
        };
    }

    componentWillMount(){
        const bodyWidth = window.innerWidth;
        const responsiveSliderImg = "responsiveSliderImg";

        if((bodyWidth >= 415) && (bodyWidth < 473)){
            this.setState({responsiveImg: responsiveSliderImg});
            console.log("The state is : " + this.state.responsiveImg);
        }
    }
}

我正在尝试将类名添加到componentWillMount函数中的状态,但它不起作用。在控制台日志中,我得到状态为:,因此状态为空。

有什么想法吗?

2 个答案:

答案 0 :(得分:6)

状态不会同步更新。来自docs

  

setState()不会立即改变this.state但会创建一个   待定状态转换。调用后访问this.state   方法可以返回现有值。

尝试检查渲染方法中的状态。

了解哪些生命周期方法可以在不重新渲染的情况下调用setState也很好。在某些情况下可能会有所帮助。我使用reactcheatsheet作为快速参考。单击“生命周期”过滤器以查看非常有用的表格参考。

感兴趣。我已经开发了一个实用程序库来帮助处理与您类似的响应式用例。它为您的组件提供了容器的大小,允许您执行响应式渲染逻辑。它对你有帮助吗?请查看here

答案 1 :(得分:3)

setState不是立即更新状态。如果你需要获得新状态,你可以将回调作为第二个参数传递给setState

this.setState({responsiveImg: responsiveSliderImg}, function () {
 // get new state here
});

Example