Борьба с условным рендерингом в React JS - PullRequest
Новая
       16

Борьба с условным рендерингом в React JS

0 голосов
/ 11 апреля 2020

Надеюсь, у любого, кто читает, будет отличный день!

Я пробовал некоторые решения из других вопросов по этой теме c, но безрезультатно, и поэтому я публикую здесь в надежде получить некоторые Мудрость от сообщества.

Контекст (читай, если хочешь): Я программист-любитель, и мне стало интересно, как работают микросервисы, и поэтому я приступил к созданию базового c пользовательского микросервиса. Через некоторое время я его запустил и подумал, что сейчас самое время взглянуть на создание внешнего интерфейса для пользовательского сервиса. У меня есть некоторый опыт работы с CSS HTML и JS, и поэтому я решил бросить вызов самому себе и попытаться изучить основы фреймворка и получить на React JS. После нескольких итераций, я получил структуру папок, которая мне нравится, и основы работы реакции-маршрутизатора.

Проблема: Ниже приведен мой код для одного из моих простых компонентов. У меня есть два разных компонента Navbar, для которых я хочу визуализировать в зависимости от того, аутентифицирован ли пользователь. Я передаю аутентификацию через реквизит и храню ее в состоянии компонентов. Однако каждый раз, когда я загружаю компонент, выводится часть else в операторе if-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;

В соответствии с запросом здесь приведен код приложения. 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

Заранее спасибо всем удивительным людям это поможет нам всем здесь.

1 Ответ

1 голос
/ 11 апреля 2020

Вы не должны хранить свои реквизиты в состоянии компонента.

Конструктор запускается только один раз, каждый раз, когда меняется ваш реквизит, ваше состояние не меняется и перерисовки не происходит. Храните реквизит в вашем состоянии, только когда это начальное значение вашего состояния.

Попробуйте приведенный ниже код, думаю, он будет работать. 

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;
...