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

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

1 个答案: