Question

为什么这不起作用：

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函数中的状态，但它不起作用。在控制台日志中，我得到状态为：，因此状态为空。

有什么想法吗？

Answer 1

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

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

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

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

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

Answer 2

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

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

Example

ComponentWillMount不设置状态React JS

2 个答案: