javascript - Reactjs-popup 未正确更改状态

Question

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

这是我的代码:

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