setState не работает в компонентеDidMount() - React

Question

У меня возникло несколько проблем с использованием функции setState в компонентеDidMount().

Что я пытаюсь сделать: Я пытаюсь сделать круг HTML5 отзывчивым (Идите больше, если окно браузера больше и наоборот).

Что я сделал до сих пор: я сохранял размеры в состоянии, называемом containerDim. По умолчанию это значение равно null. Вот очень простая базовая реализация того, что я сделал:

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {containerDim: null}; 
    this.resizeCircle = this.resizeCircle.bind(this) //To not loose value of this 
    } 

    componentDidMount() { 

    var dimensions = window.getComputedStyle(this.refs.responsiveContainer); //Used to get width and height 

    this.setState({ 
     containerDim: {width:dimensions.width, height: dimensions.height} 
    }); 

    window.addEventListener("resize", this.resizeCircle)); 

    } 

resizeCircle() { //THE RESIZING WORKS, THE initial setting of state doesn't 
    var dimensions = window.getComputedStyle(this.refs.responsiveContainer); //Used to get width and height 

    this.setState({ 
     containerDim: {width:dimensions.width, height: dimensions.height} 
    }); 

} 



    render() { 
    return (
    <div ref={"responsiveContainer"} > 
     <Circle dimensions={this.state.containerDim} /> 
    </div> 
    ); 
    } 
} 

//Circle component 

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

    componentWillReceiveProps() { 

    console.log(this.props.dimensions); //THIS LOGS OUT NULL 

    } 

    render() { 
    CIRCLE GOES HERE 
    } 

} 

В основном то, что я пытаюсь сделать с этим кодом, чтобы получить ширину и высоту «responseContainer» и передать его в качестве опоры к <Circle /> компонент.

Вышеупомянутое не работает, так как setState не изменяет состояние вообще.

Любая помощь была бы принята с благодарностью!

EDIT:

Это «работает», но я чувствую, что это не правильно и должно быть лучше:

var dimensions = window.getComputedStyle(this.refs.container); 

    setTimeout(function() { 


    this.setState({ 
    screenDim:{width:dimensions.width, height:dimensions.height} 
    }); 
}.bind(this),0); 

this.setState({ 
    screenDim:{width:dimensions.width, height:dimensions.height} 
}); 

Answer 1

Не могли бы вы попробовать это?

componentDidMount() { 
    setInterval((function() { 
     var dimensions = window.getComputedStyle(this.refs.responsiveContainer); //Used to get width and height 

     this.setState({ 
     containerDim: {width:dimensions.width, height: dimensions.height} 
     }); 
    }).bind(this), 1000); 
    } 

Answer 2

Компонент не прослушивает изменения состояния в didMount; это означает, что даже если состояние обновлено, перерисовка не запускается.