在React JS中努力进行条件渲染

Question

希望阅读的人过得愉快！

我已经尝试过其他有关此主题的问题的解决方案，但无济于事，所以我在这里发布，希望从社区中获得一些智慧。

上下文（如果需要，请阅读）：我是一名业余编码员，对微服务的工作方式非常感兴趣，因此我着手创建了一个基本的用户微服务。过了一会儿，我开始运行了，认为现在是时候为用户服务构建前端了。我对CSS HTML和JS有一定的经验，所以我认为自己会挑战自己，尝试学习框架的基础知识，并着手React JS。经过多次迭代，我得到了一个我喜欢的文件夹结构以及react-router的基础知识。

问题：以下是我的简单组件之一的代码。我有两个不同的Navbar组件，要根据用户是否通过身份验证来呈现。我正在通过道具传递身份验证，并将其存储在组件状态中。但是，每次加载组件时，都会输出“ 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存储库：https://github.com/n-winspear/StataflowFrontEnd/tree/master/stataflow

先感谢所有能帮助我们在这里帮助我们的出色人士。

Answer 1

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

构造函数只运行一次，每次道具更改时，状态都不会更改，也不会重新渲染。将道具存储在状态的初始值时。

尝试下面的代码，我认为它会起作用。

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;