JavaScript使用会话存储更新导航

Question

下面是我用来启用和禁用某些元素的导航条形码。我认为问题是当我第一次设置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>
);
}

Answer 1

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

为了更符合典型的React模式，我建议将登录状态作为道具从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文档。