Question

我有一个导航栏，它有不同的登录链接和未登录链接。我有一个名为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 只会在第一次渲染时运行，至于 Lister LocalStorage 更新，您需要在 localStorage 上添加监听器。

有什么想法为什么 useEffect 无法识别我的依赖项？

1 个答案: