reactjs-popup 没有正确更改状态

Question

在我的导航栏组件中，我有一个状态，用于存储是否打开弹出窗口的布尔值，以及一个在遵循正确操作时更改此状态的函数

这是我的代码：

import React, { Component } from 'react'
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import Popup from 'reactjs-popup';
export default class NavBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
        showSignUp: false
    }
    this.signUp = this.signUp.bind(this);
  }
  signUp() {
    this.setState(prevState => ({
      showSignUp: !prevState.showSignUp
    }));
    console.log(this.state.showSignUp);
  }
  render() {
    return (
        <div>
            <Navbar bg="dark" variant="dark">
                <Navbar.Brand href="/">Recruiting App</Navbar.Brand>
                <Nav className="ml-auto">
                <Nav.Link href="/">Home</Nav.Link>
                {
                    this.props.auth.isAuthenticated() && (
                      <Nav.Link href="/dashboard">Dashboard</Nav.Link> 
                    )
                }
                {
                    !this.props.auth.isAuthenticated() && (
                        <Nav.Link onClick={this.signUp}>Sign Up</Nav.Link>
                    )
                }
                {
                    !this.props.auth.isAuthenticated() && (
                        <Nav.Link onClick={this.props.auth.login}>Login</Nav.Link>
                    )
                }
                {
                    this.props.auth.isAuthenticated() && (
                      <Nav.Link onClick={this.props.auth.logout}>Logout</Nav.Link>  
                    )
                }
                </Nav>
            </Navbar>
            <Popup open={this.state.showSignUp} onClose={this.signUp} modal closeOnDocumentClick>
              <div>
                This is a test popup
              </div>
            </Popup>
        </div>
    );
  }
}

当我第一次单击注册时，我的控制台记录"false">

然后

当我单击文档关闭弹出窗口时，控制台记录 true，然后立即为 false，弹出窗口不会消失

Answer 1

作为问题中@divine的评论，setState 是异步的，请尝试使用 setState 回调来检查发生了什么。

https://medium.learnreact.com/setstate-takes-a-callback-1f71ad5d2296