ReactJS: Обновлены дочерние компоненты до родительского состояния

Question

У меня есть родительский и дочерний компоненты, в которых состояние дочернего элемента (openWhen по существу является mustChildRender) контролируется родителем. Я сталкиваюсь с проблемой, когда ребенок обновляется (получает реквизит) до того, как родительское состояние обновляется после вызова родительского setState(), так что ребенок получает старое состояние до тех пор, пока второй не пройдет через этот поток. Во втором проходе через ребенка получает обновленное состояние и отображается правильно.

Родитель:

openDeactivateWarning: function (resource) { 
    this.setState({ 
     openDeactivateModal: true, 
     workingResource: resource 
    }); 

    console.log('this.state.openDeactivateModal is still false here', this.state); 
}, 

render: function() { 
    return (
     <Modal openWhen={this.state.openDeactivateModal} openCallback={this.openDeactivateWarning}> 
      <p>Some Modal content</p> 
     </Modal> 
    ) 
} 

Ребенок:

componentWillReceiveProps: function() { 
    console.log('This is fired before parent state changes and openModal is not called'); 

    if (this.props.openWhen) { 
     this.openModal(); 
    } 
}, 

Я знаю, что SetState() не сразу приводит к изменению состояния, но я был под впечатлением, что дети будут по-прежнему перерисовываются после фактического изменения состояния. Есть ли более предпочтительный способ сделать это?

Answer 1

вы должны использовать nextProps, который обновляется. this.props.openWhen в componentWillReceiveProps по-прежнему остается прежним, когда родительский компонент обновляет его состояние.

componentWillReceiveProps: function (nextProps) { 
    console.log('This is fired before parent state changes and openModal is not called'); 

    if (nextProps.openWhen) { <-- updated props 
     this.openModal(); 
    } 
}