在 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

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

Constructor 运行一次，每次你的道具改变时，你的状态都不会改变并且没有重新渲染。当它是你的状态的初始值时，将道具存储在你的状态中。

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

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;

在 React JS 中与条件渲染作斗争

Struggling with conditional rendering in React JS

javascript

components

render

conditional-statements

reactjs