任何想法为什么使用效果不识别我的依赖关系？

Question

我有一个导航栏，有不同的链接登录vs未登录。我有一个名为loggedIn的变量，它设置在本地存储中。我的useEffect钩子应该会监听localstorage，一旦检测到变量，就会更新导航条链接。我确实看到了导航链接的变化，但只有在页面刷新后，这显然是不理想的，也不应该如何工作。我做错什么了吗?

import React, {useState, Fragment, useEffect} from 'react';
import {Link} from 'react-router-dom';
import './Navbar.css';
const Navbar = () => {

const [loggedIn, setIsLoggedIn] = useState(false);
useEffect(() => {
setIsLoggedIn(localStorage.getItem('loggedIn'));
}, [localStorage.getItem('loggedIn')]);

const authLinks = (
<div className="navbar">
<Link to="/home">Home</Link>
<Link to="#!">Logout</Link>
</div>
);
const guestLinks = (
<div className="navbar">
<Link to="/register">Register</Link>
<Link to="/login">Login</Link>
</div>
);
return (
<Fragment>
<div className="navbar">
<Link className="header" to="/">
Stock Bites
</Link>
{!loggedIn ? guestLinks : authLinks}
</div>
</Fragment>
);
};
export default Navbar;

const login = async () => {
try {
const res = await Axios.post('http://localhost:4000/login', user);
console.log(res);
localStorage.setItem('loggedIn', true);
localStorage.setItem('token', res.data.token);
history.push('/profile');
} catch (error) {
console.log(error);
}
};

Answer 1

useEffect期望变量/函数/表达式作为依赖项但是如果你想在依赖数组中包含localStorage.getItem('loggedIn')，请从中提取值

const localLoggedIn = localStorage.getItem('loggedIn')

然后将其传递到useEffect依赖项中，但是如果你希望组件在localstorage更新时重新渲染，那就不可能了。

在你的情况下，useeffect将只在第一次渲染时运行，因为要更新LocalStorage，你需要在LocalStorage上添加listener。