JavaScript 使用会话存储更新 Nav

Question

下面是我用来启用和禁用某些元素的导航条码。我认为问题是当我第一次设置 sessionStorage 键 loggedIn 它没有在 logged 变量中更新。我怎样才能解决这个问题？我的 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>
  );
}

Answer 1

你走在正确的轨道上。加载页面时，NavBar函数为运行，读取session存储并将读取的值复制到logged变量中。 NavBar 如果不再次轮询，则无法知道会话存储何时更改。

为了更符合典型的 React 模式，我建议将登录状态作为 prop 从 NavBar 的父级或任何登录状态逻辑所在的位置传递。

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 发出信号，告知视图所依赖的内容已更改，需要重新渲染。

如果您不熟悉钩子，请查看 React documentation。

JavaScript 使用会话存储更新 Nav

JavaScript Updating Nav with session storage

javascript

session-storage

reactjs