React Hook useEffect 缺少依赖项：'handleLogout'。包括它或删除依赖数组反应

Question

import { useState, useEffect } from "react";
import LoginModal from "./LoginModal";
import { NavLink, useLocation, useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { userLogout } from "../Features/User/userSlice";
import decode from "jwt-decode";

const Header = ({ toggleModalShow, showModal }) => {

  const [burgerAnimation, setBurgerAnimation] = useState(false);
  const [user, setUser] = useState();
  const location = useLocation();
  const dispatch = useDispatch();
  const navigate = useNavigate();

  // for showing login/sign up modal
  const showModalButton = () => {
    toggleModalShow();
  };

  const handleBurgerAnimation = () => {
    setBurgerAnimation(!burgerAnimation);
  };

  const handleLogout = async (id) => {
    await dispatch(userLogout({ id, navigate, dispatch }));
    setUser(null);
  };

  const burgerListItemAnimation = ...
  const burgerIconAnimation = ...

  const guestHeader = (
    <ul>
       ...
    </ul>
  );

  const userHeader = (
    <ul>
       ...
    </ul>
  );

  useEffect(() => {
    if (localStorage.getItem("user") && !user) {
      setUser(JSON.parse(localStorage.getItem("user")));
    }

    const accessToken = user?.accessToken;

    if (accessToken) {
      const decodedAccessToken = decode(accessToken);

      if(decodedAccessToken.exp * 1000 < new Date().getTime()){
        handleLogout(user.user._id);
      }
      console.log(decodedAccessToken);
    }
  }, [location, user]);

  return (
    <header className="header">
        ...
    </header>
  );
};

export default Header;

您好all.I 只是想尝试在到期日期结束时注销用户。如果我将 'handleLogout' 设置为 useEffect dependicies 警告不会改变。为什么我会收到此警告？如果我不解决这个问题，我会收到什么样的警告？最后，如果您有时间查看回购协议，您会提供反馈吗？

回购：https://github.com/UmutPalabiyik/mook

Answer 1

如果您将 handleLogout 保留在 useEffect 外部挂钩它应该被列为依赖项它在挂钩的回调中被引用。

If i put handleLogout to useEffect dependencies warning doesn't change.

我怀疑警告是否相同。在这一点上，我希望您看到警告更改为类似“每个渲染周期都重新声明依赖项 handleLogout，要么将其移动到 useEffect 挂钩中，要么使用 useCallback 进行记忆。 .." 类似的东西。

从这里你有 2 个选项。

将 handleLogout 移动到 useEffect 中，这样它就不再是外部依赖项了。

useEffect(() => {
  const handleLogout = async (id) => {
    await dispatch(userLogout({ id, navigate, dispatch }));
    setUser(null);
  };

  if (localStorage.getItem("user") && !user) {
    setUser(JSON.parse(localStorage.getItem("user")));
  }

  const accessToken = user?.accessToken;

  if (accessToken) {
    const decodedAccessToken = decode(accessToken);

    if (decodedAccessToken.exp * 1000 < new Date().getTime()) {
      handleLogout(user.user._id);
    }
    console.log(decodedAccessToken);
  }
}, [location, user, id, navigate, dispatch]);

Memoize handleLogout with useCallback 所以这是一个稳定的参考 and 添加它效果的依赖性。

const handleLogout = useCallback(async (id) => {
  await dispatch(userLogout({ id, navigate, dispatch }));
  setUser(null);
}, [id, navigate, dispatch]);

...

useEffect(() => {
  if (localStorage.getItem("user") && !user) {
    setUser(JSON.parse(localStorage.getItem("user")));
  }

  const accessToken = user?.accessToken;

  if (accessToken) {
    const decodedAccessToken = decode(accessToken);

    if (decodedAccessToken.exp * 1000 < new Date().getTime()) {
      handleLogout(user.user._id);
    }
    console.log(decodedAccessToken);
  }
}, [location, user, handleLogout]);

React Hook useEffect 缺少依赖项：'handleLogout'。包括它或删除依赖数组反应

React Hook useEffect has a missing dependency: 'handleLogout'. Either include it or remove the dependency array react

javascript

reactjs

react-hooks

use-effect

redux-toolkit