Question

因此，我有一个称为Header的组件，该组件将显示导航栏，具体取决于用户是否登录，我传递的道具是来自父组件的道具，由于登录后用户已通过身份验证，因此返回true / p>

应用

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

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

未捕获的不变违规：标头（...）：渲染未返回任何内容。这通常意味着缺少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;

如果不破坏道具，则不会从isLoggedIn获取正确的值，因此您不会返回任何东西（因此是错误）。

也不需要检查是否为假，只需执行以下操作：

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

提示：您可以执行类似的操作以保持代码整洁

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

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

2 个答案: