Javascript React JS中的注销功能存在问题

我正在尝试使用React JS和Spring构建一个完整的堆栈应用程序

我想在我的应用程序中添加登录/注销功能。 我已经使用RESTAPI成功配置了登录功能。用户登录后，我在会话存储中创建一个变量isUserLogged，并将其设置为true。使用这一点，我还成功地实现了安全路由（页面仅在用户登录时可见，即isUserLogged==true）

我现在正在尝试实现注销功能，但无法实现。这是我的头函数，我想在用户登录后将登录更改为注销

class HeaderComponent extends Component {

    logoutCurrentUser = () => {
        window.sessionStorage.setItem("isUserLogged", false);
    };

    render() {

        if(window.sessionStorage.getItem("isUserLogged") !== "true") {
            return (
                <div>
                    <header>
                        <Navbar bg = "dark" variant = "dark">
                            <Nav className="mr-auto">
                                <div className="navbar-brand"> <a href ="/" style={{color: "inherit"}}> Billing Dashboard </a></div>
                            </Nav>
                            <Nav className = "navbar-right">
                                <Link to={'/admin-register'} className="nav-link"><FontAwesomeIcon icon = {faUserPlus}/> Register</Link>
                                <Link to={'/admin-login'} className="nav-link"><FontAwesomeIcon icon = {faSignInAlt}/> Login</Link>
                            </Nav>
                        </Navbar>
                    </header>
                </div>
            );
        } else {
            return (
                <div>
                    <header>
                        <Navbar bg = "dark" variant = "dark">
                            <Nav className="mr-auto">
                                <div className="navbar-brand"> <a href ="/" style={{color: "inherit"}}> Billing Dashboard </a></div>
                            </Nav>
                            <Nav className = "navbar-right">
                                <Link to={'/admin-login'} className="nav-link"><FontAwesomeIcon icon = {faSignOutAlt} onClick={this.logoutCurrentUser}/> Logout </Link>
                            </Nav>
                        </Navbar>
                    </header>
                </div>
            );
        }
    }
}

export default HeaderComponent;

class HeaderComponent扩展组件{
logoutCurrentUser=（）=>{
setItem（“isUserLogged”，false）；
};
render（）{
if（window.sessionStorage.getItem（“isUserLogged”）！=“true”）{
返回(
登记
登录
);
}否则{
返回(
注销
);
}
}
}
导出默认HeaderComponent；

这样做正确吗

当我注释掉该函数时，会出现注销按钮，但当我不注释logoutCurrentUser函数时，登录菜单不会更改为注销

我还要求，一旦用户注销，他将再次显示注册和登录选项（在标题上）

简言之：

->登录时：在标题中显示注销选项，单击时，应清除会话存储变量，标题应再次显示登录和注册选项

->注销时：在标题中显示登录选项，单击，创建会话存储（已完成），然后将登录选项更改为注销（不工作）

请让我知道我哪里出了问题，我必须做些什么来纠正它

---

我们将非常感谢您的帮助，谢谢

您是否可以编写一个函数来检查localStorage中的isUserLoggedIn，然后根据localStorage中是否存在该密钥将this.state.isUserLoggedIn设置为false或true？然后将if语句改为基于this.state.isUserLoggedIn作出反应。让我知道这是否适合你。