在 React JS 中苦苦挣扎的条件渲染

Question

希望阅读的人今天过得愉快！

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

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

问题： 下面是我的一个简单组件的代码。我有两个不同的导航栏组件，我想根据用户是否经过身份验证来呈现它们。我正在通过道具传递身份验证并将其存储在组件状态中。但是，每次我加载组件时都会输出“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;

这里要求的是设置该组件的 props 的 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;