React setState 不更新状态

Question

我目前在我的项目中使用 react-modal，我可能从其他组件打开和关闭它时遇到问题。

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

缺少extends React.Component类声明。super(props);构造函数中缺少调用。