如果condition为true但反应组件在if语句中没有正确呈现

Question

// mainNavigation function

mainNavigation() {
 const {loggedIn} = this.props;

 if (loggedIn) {
  return (
    <button className="item blue-text blue-text-btn link-effect-1"
      onClick={this.logout}>Logout</button>
  );
 } else {
  return (
    <a className="item blue-text link-effect-1" href="/signin">
      Sign In / Sign Up
    </a>
  );
 }
}

// render function 

render() {

return (
  <div className="menu" id="main-nav-desktop">
    <a className="active item home-link link-effect-1">
      Home
    </a>
    <a className="item link-effect-1">
      About Us
    </a>
    <a className="item link-effect-1">
      FAQ
    </a>
    <a className="item link-effect-1">
      Contact Us
    </a>
    <a className="item link-effect-1">
      Blog
    </a>
    {this.mainNavigation()}
  </div>
);
}

当用户登录系统时，我试图隐藏登录/注册链接 我第一次登录系统时工作正常 但是当我尝试注销然后再次登录系统时 有一个登录/注册链接，而不是退出链接

当我再次刷新它工作正常

我该如何解决这个问题？