Javascript 此.setState无法正常运行

我不知道为什么，但在登录然后注销后，我无法在“

AuthForm.jsx

”中的注册和登录面板之间切换“

this.setState

”将无法工作。我已经详细阐述了将代码分解成许多片段以查看它可能出错的地方

登录前的控制台日志：

authToggleDisplaySignUp pressed"
authToggleDisplaySignUp true {displaySignUp: false}
authToggleDisplaySignUp pressed"
authToggleDisplaySignUp true {displaySignUp: true}
authToggleDisplaySignUp pressed"
authToggleDisplaySignUp true {displaySignUp: false}
authToggleDisplaySignUp pressed"
authToggleDisplaySignUp true {displaySignUp: true}

登录后的控制台日志：

authToggleDisplaySignUp pressed
authToggleDisplaySignUp true {displaySignUp: true}
authToggleDisplaySignUp pressed
authToggleDisplaySignUp true {displaySignUp: true}
authToggleDisplaySignUp pressed
authToggleDisplaySignUp true {displaySignUp: true}

这是“Root.jsx”

SignUp.jsx

<h4 onClick={this.props.toggleDisplaySignUp}>
   <a href="#">Login</a>
</h4>

---

请记住，

setState（）

是异步的。 如果必须仅在更新组件状态后执行更新，请使用

setState（）

的第二个参数

setState(
  { name: "Michael" },
  () => console.log(this.state)
);

请查收：

---

我不知道我到底做了什么，但代码现在正在运行。我从

Root.jsx

和BOOM magic中删除了

fetchAuthenticated

。我将回顾我的Git更改，并提供更多细节作为对此答案的评论。谢谢大家。

您能提供一些关于如何在登录和注册以及主页组件中使用

toggleDisplaySignUp

函数的信息吗？您能分享您的主页文件吗？尝试将AuthForm中的函数从

get loginSignup（）{}

更改为

loginSignup=（）=>{}

设置状态后的console.log回调不是我遇到的问题，不过谢谢。我之所以使用回调函数，是因为我知道它是异步的，所以它只会在setState之后出现，这样我就可以检查状态是否发生了更改，并确保在我登录和注销后状态将停止进行更改

import React, { Component, lazy, Suspense } from "react";
import Loading from "./Loading.jsx";
import { connect } from "react-redux";
import { fetchInfo } from "../actions/accountInfo.js";
import history from "../history.js";

// Lazy Loading Components
const AccountInfo = lazy(AccountInfo => import("./AccountInfo.jsx"));
const NavBar = lazy(NavBar => import("./NavBar.jsx"));
const Upload = lazy(Upload => import("./Upload.jsx"));

class Home extends Component {
  componentDidMount() {
    this.props.fetchInfo();
    this.checkStatus();
  }

  checkStatus = () => {
    if (!this.props.account.loggedIn) {
      history.push("/");
    }
  };

  render() {
    return (
      <div>
        <Suspense fallback={<Loading />}>
          <NavBar />
        </Suspense>
        <p>Home Page</p>
        <Suspense fallback={<Loading />}>
          <AccountInfo accountInfo={this.props.accountInfo} />
        </Suspense>
        <br />
        <hr />
        <Suspense fallback={<Loading />}>
          <Upload />
        </Suspense>
        <hr />
      </div>
    );
  }
}

export default connect(
  ({ accountInfo, account }) => ({ accountInfo, account }),
  { fetchInfo }
)(Home);

<h4 onClick={this.props.toggleDisplaySignUp}>
   <a href="#">Sign Up</a>
</h4>

<h4 onClick={this.props.toggleDisplaySignUp}>
   <a href="#">Login</a>
</h4>

class Logout extends Component {
  reRoute = () => {
    this.props.logout();
  };

  render() {
    return (

      <button onClick={this.reRoute}>Log Out</button>
    );
  }
}

setState(
  { name: "Michael" },
  () => console.log(this.state)
);