时间戳

首页 > 解决方案 > React setState 不更新状态

javascript - React setState 不更新状态

问题描述

我目前在我的项目中使用 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}/>
      }
    }

由于提到的问题，一旦我打开它，我就无法关闭它。请帮我解决这里的问题。谢谢你的帮助。

标签： javascriptreactjsreact-modal

解决方案

  1. 类声明中缺少extends React.Component。

  2. 构造函数中缺少super(props);调用。

推荐阅读