Javascript 在React JS中挣扎于条件渲染

希望正在读书的人今天过得愉快

我已经尝试了其他问题的一些解决方案，但没有任何效果，因此我在这里发帖，希望从社区中获得一些智慧

如果要执行以下操作，请阅读上下文： 我是一名业余程序员，对微服务的工作方式非常感兴趣，因此我开始创建一个基本的用户微服务。过了一会儿，我启动了一个并开始运行，我认为现在是一个考虑为用户服务构建前端的好时机。我有一些CSS HTML和JS方面的经验，所以我想我应该挑战自己，尝试学习框架的基础知识，并登陆React JS。经过多次迭代，我得到了一个我喜欢的文件夹结构和react路由器工作的基础知识

问题是： 下面是我的一个简单组件的代码。我有两个不同的导航栏组件，我想根据用户是否经过身份验证来呈现它们。我通过道具传递身份验证，并将其存储在组件状态。但是，每次加载组件时，都会输出'if else'语句的'else'部分，在本例中为'Hello World！'。我仔细检查了状态是否确实具有正确的属性，并将其设置为true

import React from 'react';
import 'components/loginform/css/LoginForm.css';
import ButtonSecondary from 'styled-components/ButtonSecondary.js';
import { Redirect, Link } from 'react-router-dom';

class LoginForm extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            redirect: null,
            plusRegister: this.props.plusRegister
        }
    }

    render() {

        if (this.state.redirect) {
            return (
                <Redirect exact={true} to={this.state.redirect} />
            );
        }

        if (this.state.plusRegister) {
            return (
                <div className="login-form">
                    <div className="form-create">
                        <h1>STATAFLOW</h1>
                        <h2>Welcome to <span className="sf-login-create-span">Stataflow</span> your simple cashflow application.</h2>
                        <h2>Start your free trial today.</h2>
                        <ButtonSecondary onClick={() => this.setState({ redirect: '/register' })} btnWidth="12em" btnHeight="3em">Create Account</ButtonSecondary>
                    </div>
                    <div className="form-login">
                        <h1>LOGIN</h1>
                        <form className="form-login-inputs">
                            <input type="email" placeholder="Email Address" />
                            <input type="password" placeholder="Password" />
                        </form>
                        <Link>Can't access your account?</Link>
                        <ButtonSecondary light btnWidth="12em" btnHeight="3em">Login</ButtonSecondary>
                    </div>
                </div>
            );
        } else {
            return(
                <h1>Hello World!</h1>
            );
        }
    }
}

export default LoginForm;

根据要求，这里是为这个组件设置道具的App.js代码

function App() {
  return (
    <Router>
      <Switch>
        <Route exact={true} path='/'>
          <HomePage />
        </Route>
        <Route exact={true} path='/login'>
          <LoginPage plusRegister={true} />
        </Route>
        <Route exact={true} path='/register'>
          <RegisterPage />
        </Route>
      </Switch>
    </Router>
  );
}

如果您需要有关我的代码的更多上下文，请参阅GitHub repo：

---

提前感谢所有在这里帮助我们的杰出人士。

您不应该将道具存储在组件状态

构造函数只运行一次，每次您的道具更改时，您的状态不会更改，并且不会重新渲染。当道具是你所在州的初始值时，在你所在州储存道具

尝试下面的代码，我认为它会工作

import React from 'react';
import 'components/loginform/css/LoginForm.css';
import ButtonSecondary from 'styled-components/ButtonSecondary.js';
import { Redirect, Link } from 'react-router-dom';

class LoginForm extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            redirect: null,
        }
    }

    render() {

        if (this.state.redirect) {
            return (
                <Redirect exact={true} to={this.state.redirect} />
            );
        }

        if (this.props.plusRegister) {
            return (
                <div className="login-form">
                    <div className="form-create">
                        <h1>STATAFLOW</h1>
                        <h2>Welcome to <span className="sf-login-create-span">Stataflow</span> your simple cashflow application.</h2>
                        <h2>Start your free trial today.</h2>
                        <ButtonSecondary onClick={() => this.setState({ redirect: '/register' })} btnWidth="12em" btnHeight="3em">Create Account</ButtonSecondary>
                    </div>
                    <div className="form-login">
                        <h1>LOGIN</h1>
                        <form className="form-login-inputs">
                            <input type="email" placeholder="Email Address" />
                            <input type="password" placeholder="Password" />
                        </form>
                        <Link>Can't access your account?</Link>
                        <ButtonSecondary light btnWidth="12em" btnHeight="3em">Login</ButtonSecondary>
                    </div>
                </div>
            );
        } else {
            return(
                <h1>Hello World!</h1>
            );
        }
    }
}

export default LoginForm;

---

将道具保存到状态实际上是一种反模式，只需消耗道具，即如果这个.props.plusRegister。。。。我不认为这会解决你的问题，但它消除了一个移动的难题。介意用路由器代码/逻辑和/或LoginForm代码的父组件更新问题吗？要了解如何设置、传递prop plusRegister等，请尝试调试代码，比如console.logthis.state，或者至少是console.logthis.props.plusRegister，以了解传递的值。我认为这里的问题是你使用这个道具，而不是你的身体里的道具constructor@GalAbra啊，接得好！同意这可能导致问题。很棒的建议@GalAbra发现了问题！我没有在需要的地方传递正确的道具。还感谢@Drew Reese的建议，用它清理了我代码的一些部分：