this.setState無法正常運行

Question

我不知道為什么，但是登錄並注銷后，無法在“ 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”

import React, { Component } from "react";
import { connect } from "react-redux";
import Home from "./Home.jsx";
import AuthForm from "./AuthForm/AuthForm.jsx";
import { fetchAuthenticated } from "../actions/account.js";     

class Root extends Component {
  state = {
    displaySignUp: false
  };

  authToggleDisplaySignUp = () => {
    console.log("authToggleDisplaySignUp pressed");
    this.setState(
      {
        displaySignUp: !this.state.displaySignUp
      },
      () => {
        console.log("authToggleDisplaySignUp true", this.state);
      }
     );
  };

  render() {
    if (this.props.account.loggedIn && !this.state.displaySignUp) {
      return <Home authToggleDisplaySignUp={this.authToggleDisplaySignUp} />;
    } else {
      return (
        <AuthForm
          displaySignUp={this.state.displaySignUp}
          authToggleDisplaySignUp={this.authToggleDisplaySignUp}
        />
      );
    }
  }
}
export default connect(
  ({ account }) => ({ account }),
  { fetchAuthenticated }
)(Root);

這是AuthForm.jsx

import React, { Component, lazy, Suspense } from "react";
import Login from "./Login.jsx";
import Loading from "../Loading.jsx";
import Misc from "../Misc.jsx";
import "../css/AuthForm.css";

const SignUp = lazy(() => import("./SignUp.jsx"));

class AuthForm extends Component {
  validateEmail = email => {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
  };

  get loginSignup() {
    if (!this.props.displaySignUp) {
      return (
        <Login
          validateEmail={this.validateEmail}
          toggleDisplaySignUp={this.props.authToggleDisplaySignUp}
        />
      );
    } else {
      return (
        <Suspense fallback={<Loading />}>
          <SignUp
            validateEmail={this.validateEmail}
            toggleDisplaySignUp={this.props.authToggleDisplaySignUp}
          />
        </Suspense>
      );
    }
  }

  render() {
    return (
      <React.Fragment>
        {this.displaySignUpState}
        <div className="holder">
          <div className="leftSide" />
          <div className="rightSide">
            {this.loginSignup}
            <Misc />
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default AuthForm;

Home.jsx

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);

我使用“道具隧道”將toggleDisplaySignUp向下發送到登錄和注冊組件，它們僅向下兩層，實際上我沒有在“ Home.jsx ”中使用toggleDisplaySignUp ，我只是將其發送到那里用於測試某些內容，鍛煉。 我已將其刪除。

Login.jsx

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

SignUp.jsx

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

以防萬一，這里是注銷功能，它只是向服務器發出GET請求，並將this.props.account.loggedIn更改為false

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

  render() {
    return (

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

Answer 1

請記住， setState()是異步的。 如果必須在組件狀態更新后才執行更新，請使用setState()的第二個參數。

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

請檢查：

• 的setState
• setState進行回調

Answer 2

我不確切知道我做了什么，但是代碼現在可以正常工作了。 我從Root.jsx和BOOM magic中刪除了fetchAuthenticated 。 我將審查我的Git更改，並提供更多詳細信息作為對此答案的評論。 謝謝大家。