我正在尝试更新状态，但无法正常工作

Question

我想以成功登录状态更新“ userSuccessfullLoggedIn”，但不会更新。如果用户名和密码不正确，它将更新状态，但是当用户名和密码为真时，它不会更新。我找不到问题，请帮助我。

import React, { Component } from "react";
import LoginResponse from "./LoginResponse";

class Login extends Component {
  constructor() {
    super();
    this.state = {
      username: "",
      password: "",
      loginStatus: "",
      userSuccessfullLoggedIn: "",
    };
  }

  onChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value,
    });
  };

  loginResponse = () => {
    if (this.state.username === "jarvis" && this.state.password === "jarvis") {
      console.log("Successfull");
      this.setState({
        loginStatus: true,
        userSuccessfullLoggedIn: true,
      });
      sessionStorage.setItem("user", this.state.username);
      this.props.history.push(`/welcome/${this.state.username}`);
    } else {
      console.log("Wrong");
      this.setState({
        loginStatus: false,
        userSuccessfullLoggedIn: false,
      });
    }
  };

  render() {
    return (
      <div>
        <div className="login-form">
          <h1 className="text-center"> LOGIN </h1>
          <div className="form-group">
            <input
              placeholder="Username"
              className="form-control"
              type="text"
              name="username"
              value={this.state.username}
              onChange={this.onChange}
            />
          </div>
          <div className="form-group">
            <input
              placeholder="Password"
              className="form-control"
              type="password"
              name="password"
              value={this.state.password}
              onChange={this.onChange}
            />
          </div>
          <div className="form-group">
            <button className="btn btn-primary" onClick={this.loginResponse}>
              LOGIN
            </button>
          </div>
          <LoginResponse status={this.state.loginStatus} />
        </div>
      </div>
    );
  }
}
export default Login;

控制台

它将进入成功块，但不会将状态从false更新为true

Answer 1

setState本质上是异步的，请回电并检查状态，即

this.setState({ loginStatus: true, userSuccessfullLoggedIn: true, }, () => {
 console.log(this.state.loginStatus); 
});