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向下发送到登录和注册组件，它们仅向下两层，实际上我没有在“ {{1}”中使用toggleDisplaySignUp }“我只是将其发送到那里以测试无法解决的问题。我已将其删除。

Login.jsx

Home.jsx

SignUp.jsx

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

只要这是注销功能，它只是向服务器发出GET请求并将<h4 onClick={this.props.toggleDisplaySignUp}> <a href="#">Login</a> </h4>更改为false

this.props.account.loggedIn

Answer 1

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

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

请签出：

Answer 2

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

this.setState无法正常运行

2 个答案: