为什么我的反应标头根本不呈现？

Question

所以我有一个名为 Header 的组件，它将根据用户是否登录显示导航栏，我传递的道具是来自父组件的道具，它返回 true，因为用户在登录后已经通过身份验证

应用

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

那么这是我的未呈现的 Header 组件

标题

// 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;

这是我重新加载页面时遇到的错误：

Uncaught Invariant Violation: Header(...): 没有从渲染返回。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null。 有人可以帮忙吗？

Answer 1

如果isLoggedIn 是undefined，则isLoggedIn === false 的计算结果为false，这会导致您的组件不返回任何内容并导致您看到的错误。

---

将您的 else 子句更改为：

else {
  return <GuestGreeting />;
}

...或者正如@Isaac 指出的那样，完全删除else 并执行以下操作：

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

...这应该可以解决它。

---

啊，@Jose 是正确的，您应该使用解构：const { isLoggedIn } = props;...这就是为什么 isLoggedIn 首先是undefined。

Answer 2

你应该使用 es6 解构：

const { isLoggedIn } = props;

如果你不解构你的 props，你就不会从 isLoggedIn 得到正确的值，所以你不会返回任何东西（因此是错误）。

也不需要检查是否为假，只需：

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

---

提示：您可以这样做以保持代码整洁

const Header = ({ isLoggedIn }) => isLoggedIn ? <UserGreeting /> : <GuestGreeting />