React setState не обновляет состояние

Question

В настоящее время я использую реагирующий модал в своем проекте, и у меня есть проблема с открытием и закрытием его, вероятно, из другого компонента.

class MainComponent {

   constructor() {
   this.state = {reportOpen: false};
   }

  closeReport = (e) => {
     this.setState({reportOpen: false}, () => 
console.log(this.state.reportOpen)); // This line print true !!!
  }

   render() {
      return (
         <Button onClick={(e) => this.setState({reportOpen: true})}/>
         <ReportModal isOpen={this.state.reportOpen} onClose= . 
{this.closeReport}/>
      )
   }
}



// Modal
   class ReportModal {
       static getDerivedStateFromProps(nextProps, prevState) {
        if (nextProps.isOpen !== prevState.isOpen) {
          return ({isOpen: nextProps.isOpen});
        }
        else {
          return null;
        }
      }

      render() {
         return <Modal isOpen={this.state.isOpen}
            onRequestClose={this.props.onClose}
            shouldCloseOnOverlayClick={true}
            shouldCloseOnEsc={true}/>
      }
    }

Из-за упомянутой проблемы я не смог закрыть модальное окно, как только яоткрыл его.Пожалуйста, помогите мне разобраться в проблеме здесь.Спасибо за любую помощь.

Answer 1

• Пожалуйста, отладьте в getDerivedStateFromProps для нового производного состояния.
• Кроме того, почему бы вам просто не обработать то же самое в компоненте ReportModal, обратный вызов кажется переутомительным

Answer 2

1. Отсутствует extends React.Component в объявлении класса.

2. Отсутствует super(props); вызов в конструкторе.