在无状态功能组件中使用 if else 会导致返回 null 时出错

Question

如果用户登录，我正在尝试有条件地返回导航栏。用户令牌保存到 localStorage，然后发送到后端系统。如果后端返回错误消息，则表示用户未登录，因此代码不应呈现导航栏。 但是，它并没有像我期望的那样工作，我现在真的需要其他人的知识。

我得到的错误信息是：

“Nav(...): 渲染没有返回任何内容。这通常意味着缺少返回语句。或者，不渲染任何内容，返回 null。”

Nav.js

import React from 'react';
import {Link} from 'react-router-dom';
import {tokenCheck} from '../utils/MediaAPI';

const Nav = () => {
  tokenCheck(localStorage.getItem('Login-token')).then(data => {
    if (data.message) {
      return null;
    } else {
      return (
          <nav>
            <ul>
              <li>
                <Link to="/home">Home</Link>
              </li>
              <li>
                <Link to="/profile">Profile</Link>
              </li>
              <li>
                <Link to="/logout">Logout</Link>
              </li>
            </ul>
          </nav>
      );
    }
  });
};

export default Nav;

从我的 App.js 父组件渲染。

  render() {
    return (
        <Router>
          <Nav/>
          <Route exact path="/" render={(props) => (
              <Login {...props} setUser={this.setUser}/>
          )}/>
          <Route exact path="/home" render={(props) => (
              <Home {...props} picArray={this.state.picArray}/>
          )}/>
          <Route exact path="/profile" render={(props) => (
              <Profile {...props} userData={this.state.user}/>
          )}/>
          <Route exact path="/single/:id" component={Single}/>
        </Router>
    );
  }

任何帮助将不胜感激！

Answer 1

如果你根本不想渲染任何东西，你甚至不想处理<Nav />。在其父级中，使用

tokenCheck(localStorage.getItem('Login-token')).then(data => {
    this.setState({errorMessage: data.message})
}

或者任何你想在你的州叫它的东西。将其放置在 componentDidMount 之类的地方并用于渲染

{!this.state.errorMessage && </Nav />}

这样，如果出现错误信息，你不想渲染的组件甚至永远不会弹出。