JavaScript Обновление Nav с сохранением сессии - PullRequest
Новая
       25

JavaScript Обновление Nav с сохранением сессии

1 голос
/ 25 апреля 2020

Ниже приведен штрих-код, который я использую для включения и отключения определенных элементов. Я думаю, проблема заключается в том, что когда я впервые устанавливаю ключ sessionStorage loggedIn, он не обновляется в записываемой переменной. Как я могу это исправить? Мое SessionStorage обновляется правильно, но мое зарегистрированное значение не меняется. Я думаю, что мне нужно либо повторно запустить код навигации, либо просто перезапустить 

let logged = ....

Если кто-то может помочь мне разобраться, это должно решить мою проблему. 

function NavBar() {

    const navStyle = {
        color: 'white',
        textDecoration: 'none'
    };

    // let logged = Boolean;
    let logged = sessionStorage.getItem("loggedIn");
    let baseTabs = true;

  return (
    <nav>
        <Link style={navStyle} to='/'>
            <h3>Aura Flows</h3>
        </Link>

        <ul className='nav-links'>

        {baseTabs && <Link style={navStyle} to='/faq'> <li>FAQ</li> </Link> }

        {baseTabs && <Link style={navStyle} to='/pricing'> <li>Pricing</li> </Link> }

        {!logged && <Link style={navStyle} to='/login'> <li>Login</li> </Link> }

        {!logged && <Link style={navStyle} to='/signup'> <li>Sign Up</li> </Link> }

        {logged && <Link style={navStyle} to='/logout'> <li>Logout</li> </Link> }

        </ul>

    </nav>
  );
}

1 Ответ

0 голосов
/ 25 апреля 2020

Вы на правильном пути. Когда страница загружена, запускается функция NavBar, читается сессия, а значение чтения копируется в переменную logged. NavBar не может знать, когда изменилось хранилище сеанса, без повторного опроса.

Чтобы больше соответствовать типичным шаблонам React, я бы предложил передать состояние входа в систему как опору из NavBar ' s Родитель или откуда бы логин государства входа c не был. 

function NavBar(props) {
    let logged = props.logged;
    ...
}

function Parent() {
    const [logged, setLogged] = useState(false);

    function logIn() {
        // Some logic to determine log-in
        // Note that you shouldn't depend on front-end code for strong authentication
        setLogged(true);
    }

    return (
        <div>
            <NavBar logged={logged} />
            <button onClick={logIn} />
        </div>
    );
}

Мы используем хук useState для создания переменной состояния. Используя функцию set, которую возвратил хук, мы сообщаем React, что что-то, от чего зависит представление, изменилось и что ему нужно снова выполнить рендеринг.

Если вы не знакомы с хуками, посмотрите Реагировать на документацию .

...