Я создал меню, используя React. В меню должны быть состояния «Вход в систему» и «Выход из системы». Он отлично работает в обычном и мобильном окне браузера на рабочем столе. Однако, по какой-то причине, когда я сначала открываю сайт на своем телефоне, он находится в состоянии «Выйти из системы», после входа в систему он находится в состоянии «Выйти из системы», а после этого, если я нажимаю «Выйти из системы», браузер просто обновляется, но меню остается в состоянии «залогинен». Это почему? Как я могу изменить меню на «Вышел из системы» при выходе из системы?
Код, связанный с меню (версия телефона):
function BarAndMenu(props) {
const [hamburger, setHamburger] = useState(false);
const handleDismissMenuAndLogOut = () => {
localStorage.removeItem("userIdLoggedIn");
localStorage.removeItem("userNameLoggedIn");
window.location.reload();
setAnchorEl(undefined);
};
const toggleHamburger = () => {
setHamburger(!hamburger);
};
const userNameLoggedIn = localStorage.getItem("userNameLoggedIn");
return (
<div className="toolBar">
<button onClick={toggleHamburger} className="hamburger">
{hamburger ? <Close /> : <MenuIcon />}
</button>
</div>
<ul style={{
display: window.innerWidth <= 680 && hamburger ? "block" : "none"
}}
className="mobileMenu">
<Link to="/about" className="link" onClick={toggleHamburger}>
<li>About</li>
</Link>
<Link to="/myTickets" className="link" onClick={toggleHamburger}>
<li>MyTickets</li>
</Link>
{userNameLoggedIn ? (
<>
<Link to="/pages" className="link" onClick={toggleHamburger}>
<li>{userNameLoggedIn}</li>
</Link>
<li onClick={handleDismissMenuAndLogOut} className="pointer">
Log out
</li>
<Link to="/cards" className="link" onClick={toggleHamburger}>
<li>Cards</li>
</Link>
<Link to="/settings" className="link" onClick={toggleHamburger}>
<li>Settings</li>
</Link>
</>
) : (
<li>{fbContent}</li>
)}
</ul>
Где fbContent - FacebookLoginButton (работает правильно). Сайт можно найти по адресу tiket.hu.