Реагировать на элементы Nav с условным рендерингом неправильно - PullRequest
Новая
       37

Реагировать на элементы Nav с условным рендерингом неправильно

0 голосов
/ 03 марта 2019

В настоящее время я работаю над веб-приложением для образовательных целей с React в качестве Frontend и Rails API в качестве Backend.Я пытаюсь отобразить разные ссылки Nav в зависимости от определенной информации, которую я получаю от API.Например, если у учащегося не добавлен язык, он должен отображать только профиль и ссылки для оплаты.Проблема заключается в том, что, хотя он фактически входит в данное условие (проверено с помощью console.log, возвращающего 'undefined', как и ожидалось), он не показывает результат из оператора if, а вместо этого показывает значение по умолчанию.Что я здесь не так делаю?Есть ли более эффективный или правильный способ добиться этого?Любая помощь будет высоко оценен.Смотрите код ниже для более подробной информации.

import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom';

class Nav extends Component {
  constructor(props){
    super(props);
    this.state = {ableToRedirect: false};
  }

  handleClick(){
    this.props.signOut();
    this.setState({ableToRedirect: true});
  }

  render(){
    const member = this.props.member.data;
    const language = this.props.languages;

    if(this.state.ableToRedirect === true){
      window.location.reload();
    }

    if(!member){
      return(
        <h3>Loading...</h3>
      )
    }

    // This is the condition I need to be rendered
    if(!language || language.length === 0 || language === undefined){
      console.log(language)
      return(
       <nav className="cd-side-nav">
          <ul className="side-nav">
            <NavItem to="/mi-perfil"><FontAwesome name="user" />Mi Perfil</NavItem>
            <NavItem to="/mis-pagos"><FontAwesome name="money" />Mis Pagos</NavItem>
            <li><Link to="/about"><FontAwesome name="sign-out" />Cerrar sesión</Link></li>
          </ul>
        </nav>
      )
    }

    // This is what is being rendered instead
    return(
      <nav className="cd-side-nav">
        <ul className="side-nav">
          <NavItem to="/dashboard"><FontAwesome name="tachometer" />Dashboard</NavItem>
          <NavItem to="/mis-cursos"><FontAwesome name="graduation-cap" />Mis cursos</NavItem>
          <NavItem to="/elegir-curso"><FontAwesome name="users" />Elegir grupos</NavItem>
          <NavItem to="/recuperar-sesion"><FontAwesome name="check-circle" />Recuperar sesión</NavItem>
          <NavItem to="/mi-perfil"><FontAwesome name="user" />Mi Perfil</NavItem>
          <NavItem to="/mis-pagos"><FontAwesome name="money" />Mis Pagos</NavItem>
          <li><Link to="/about"><FontAwesome name="sign-out" />Cerrar sesión</Link></li>
        </ul>
      </nav>
    )
  }
}

function NavItem({children, to, exact}){
  return (
    <Route path={to} exact={exact} children={({match}) => (
      <li className={match ? 'active' : ''}>
        <Link to={to}>{children}</Link>
      </li>
    )}/>
  )
}

export default Nav

1 Ответ

0 голосов
/ 03 марта 2019

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

Вы можете использовать Boolean в этом отношении. 

const condition = Boolean(!language || !language.length || language === undefined)
if(condition) {
   console.log(condition);
   return ....
}
...