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

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

Answer 2

请在getDerivedStateFromProps上调试新的派生状态。
为什么您不只在ReportModal组件中处理相同的事情，回调似乎就显得太劳累了

React setState不会更新状态

2 个答案: