Использование if else в функциональном компоненте без состояния приводит к ошибке при возврате null

#reactjs

Вопрос:

Я пытаюсь условно вернуть панель навигации, если пользователь вошел в систему. Токен пользователя сохраняется в localStorage, а затем отправляется в серверную систему. Если серверная часть возвращает сообщение об ошибке, это означает, что пользователь не вошел в систему, таким образом, код не должен отображать панель навигации. Однако это работает не совсем так, как я ожидаю, и на данный момент мне действительно нужны чужие знания.

Сообщение об ошибке, которое я получаю, является:

«Nav (…): из рендеринга ничего не было возвращено. Обычно это означает, что оператор return отсутствует. Или, чтобы ничего не отображать, верните 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>
    );
  }

Любая помощь будет высоко оценена!

1. Вы возвращаетесь в обещании. вам придется await получить результат

2. @DTul Там нет return in Nav , поэтому он возвращает undefined , а не обещание. В любом случае, не забывайте, что async / await функции также возвращают обещания.

Ответ №1:

Вы даже не хотите иметь дело с <Nav /> , если вы вообще не хотите ничего отображать. В его родительском элементе используйте

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

Или как вы хотите это назвать в своем состоянии. Поместите это где-нибудь вроде componentDidMount и в render use

 {!this.state.errorMessage amp;amp; </Nav />}

Таким образом, при наличии сообщения об ошибке компонент, который вы не хотите отображать, никогда даже не появится.