почему мой реагирующий заголовок не отображается вообще? - PullRequest
Новая
       29

почему мой реагирующий заголовок не отображается вообще?

1 голос
/ 17 марта 2019

Итак, у меня есть компонент с именем Header, который будет отображать панель навигации в зависимости от того, вошел ли пользователь в систему или нет, пропускаемые мной данные - это реквизит родительского компонента, который возвращает true, поскольку пользователь уже аутентифицирован после входа в систему

App 

 <Header IsLoggedIn={this.state.IsLoggedIn} />

тогда это мой компонент заголовка, который не рендерит

Заголовок 

// stateless functional component
import React from 'react';
import { NavLink } from 'react-router-dom'; //import Navlink to create nav links and to put active class on any link that is active
import UserGreeting from './UserGreeting'
import GuestGreeting from './GuestGreeting'
/*Header- Displays the top menu bar for the application and 
includes buttons for signing in and signing up 
(if there's not an authenticated user) or the user's first and last name 
and a button for signing out (if there's an authenticated user).*/


function Header(props) {
  const isLoggedIn = props;
  console.log(props)
  if (isLoggedIn ===true) {
    return <UserGreeting />;
  }
  else if(isLoggedIn===false) {
    return <GuestGreeting />;
  }
}

export default Header;

это ошибка, которую я получаю при перезагрузке страницы:

Неизученное нарушение инварианта: Заголовок (...): Ничего не возвращено из рендера. Обычно это означает, что отсутствует инструкция возврата. Или, чтобы ничего не отобразить, верните null. Может кто-нибудь помочь?

Ответы [ 2 ]

1 голос
/ 17 марта 2019

Вы должны использовать ES6 деструктурирование: 

const { isLoggedIn } = props;

Если вы не деструктурируете свой реквизит, вы не получите правильное значение из isLoggedIn, поэтому вы ничего не вернете (таким образом, ошибку).

Также не нужно проверять, если ложно, просто сделайте: 

function Header(props) {
  const { isLoggedIn } = props;
  if (isLoggedIn) {
    return <UserGreeting />;
  } else {
    return <GuestGreeting />;
  }
}

СОВЕТ: Вы можете сделать что-то подобное для сохранения кода в чистоте 

const Header = ({ isLoggedIn }) => isLoggedIn ? <UserGreeting /> : <GuestGreeting />
1 голос
/ 17 марта 2019

Если isLoggedIn равно undefined, то isLoggedIn === false оценивается как false, что приводит к тому, что ваш компонент ничего не возвращает и приводит к ошибке, которую вы видите.

Измените else предложение к этому: 

else {
  return <GuestGreeting />;
}

... или, как указывает @Isaac, полностью удалите else и просто сделайте это: 

if (isLoggedIn === true) {
  return <UserGreeting />;
}
return <GuestGreeting />;

... и это должноисправить это.

Ах, и @Jose правильно, что вы должны использовать деструктурирование: const { isLoggedIn } = props; ... то есть , почему isLoggedIn было undefined в первомместо.

...