this.setState 无法正常运行答案

【问题标题】：this.setState not functioning properlythis.setState 无法正常运行
【发布时间】：2019-03-08 23:34:18
【问题描述】：

我不知道为什么，但是在我登录然后注销后，我无法在“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);

我使用“props tunneling”将toggleDisplaySignUp向下发送到登录和注册组件，它们只是向下2层，实际上我没有在“Home.jsx”中使用toggleDisplaySignUp，我只是发送了它在那里测试一些没有成功的东西。我已经删除了。

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

SignUp.jsx

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

这里是 Logout 函数，它只是向服务器发出 GET 请求并将 this.props.account.loggedIn 更改为 false

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

  render() {
    return (

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

【问题讨论】：

您能否提供一些关于如何在 Login 和 Signup 以及 Home 组件中使用 toggleDisplaySignUp 函数的信息？
你能分享你的主页文件吗？
尝试将AuthForm中的get loginSignup(){}函数改成loginSignup = () => {}

标签： javascript reactjs react-redux state-saving

【解决方案1】：

请记住，setState() 是异步的。如果必须在组件状态更新后才执行更新，请使用setState() 的第二个参数。

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

请查看：

【讨论】：

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

【解决方案2】：

我不知道我到底做了什么，但代码现在可以工作了。我从Root.jsx 和BOOM 魔术中删除了fetchAuthenticated。我将审查我的 Git 更改并提供更多详细信息作为对此答案的评论。谢谢大家。

【讨论】：