условная проверка не работает должным образом в компоненте реакции - PullRequest
Новая
       21

условная проверка не работает должным образом в компоненте реакции

0 голосов
/ 05 февраля 2019

Я создаю заголовок для отображения кнопки входа в систему и выхода из системы на основе статуса авторизации, и я использую реагирующий cookie-файл для хранения статуса авторизации

Код компонента 

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { withCookies } from "react-cookie";

class HeaderComponent extends Component {
  renderAuthMenu = () => {
    const { cookies } = this.props;
    console.log(cookies.get("loggedIn"));
    if (cookies.get("loggedIn")) {
      return (
        <ul className="navbar-nav ml-auto" style={{ margin: "0 2em" }}>
          <li className="nav-item">
            <Link to="/logout">Logout</Link>
          </li>
        </ul>
      );
    } else {
      return (
        <ul className="navbar-nav ml-auto" style={{ margin: "0 2em" }}>
          <li className="nav-item">
            <Link to="/login">Login</Link>
          </li>
          <li className="nav-item" style={{ margin: "0 2em" }}>
            <Link to="/register">Signup</Link>
          </li>
        </ul>
      );
    }
  };

  render() {
    return (
      <div>
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <Link className="navbar-brand" to="/">
            V1-WorldWide
          </Link>
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon" />
          </button>

          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav mr-auto">
              <li className="nav-item" style={{ margin: "0 2em" }}>
                <Link to="/">Products</Link>
              </li>
              <li className="nav-item" style={{ margin: "0 2em" }}>
                <Link to="/products/new">Add Product</Link>
              </li>
            </ul>

            {this.renderAuthMenu()}
          </div>
        </nav>
      </div>
    );
  }
}

export default withCookies(HeaderComponent);

Обратите внимание : - эта консоль перед проверкой if показывает правильное значение, но правильная условная часть не отображается. Я также использую ApolloClient и не уверен, имеет ли это значение

...