Почему мое приложение ведет себя по-другому на мобильных устройствах, чем на настольных - PullRequest
1 голос
/ 22 апреля 2020

Я создал меню, используя 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.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...