使用条件渲染反应导航项目无法正确渲染

Question

我目前正在开发一个用于教育目的的 Web 应用程序，其中 React 作为前端，Rails API 作为后端。我正在尝试根据从 API 获得的某些信息呈现不同的导航链接。例如，如果学生没有添加语言，它应该只呈现个人资料和付款导航链接。问题在于，尽管它实际上进入了给定条件（使用 console.log 按预期返回“未定义”进行测试），但它没有显示 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

Answer 1

您的代码应该可以工作。你提到undefined 用单引号括起来。 undefined 不是字符串。所以仔细检查语言值。

你可以使用 Boolean 来解决这个问题。

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