如何解决React.js中useEffect缺失依赖的警告？

这个警告的核心原因是React Hooks规则要求：useEffect中用到的所有外部依赖必须声明在依赖数组中，否则可能因依赖更新但useEffect未重新执行，导致引用旧值的问题。以下是两种可行的解决方式：

方案一：规范添加依赖并优化父组件函数（推荐） #

这种方式既符合React Hooks规则，又能避免不必要的重复渲染：

1. 在NotFound组件的useEffect依赖数组中加入chageFooterColorsHandler
2. 在定义该函数的父组件中，用useCallback包裹函数，防止父组件每次渲染都生成新的函数实例，导致useEffect重复触发

修改后的NotFound组件代码 #

import React, { useEffect } from "react";
import NotFound404 from "../assets/images/nfx404.png";
import { motion } from "framer-motion";
import { Link } from "react-router-dom";
import { Screen404ButtonsVariant } from "../Helpers/Variants";
import { FaHandPointLeft } from "react-icons/fa";

const NotFound = ({ chageFooterColorsHandler }) => {
  useEffect(() => {
    chageFooterColorsHandler("#0e37633c", "#0E3763");
  }, [chageFooterColorsHandler]); // 添加缺失的依赖

  return (
    <div className="notfound-container">
      <img src={NotFound404} alt="notfoundpage" />
      <motion.div
        className="div-navigation-button"
        variants={Screen404ButtonsVariant}
        initial="hidden"
        animate="visible"
      >
        <Link to="/" className="btn btn-outline-navy">
          <span>
            <FaHandPointLeft
              onClick={() =>
                chageFooterColorsHandler(
                  "rgba(220, 20, 60, 0.3)",
                  "rgba(220, 20, 60, 1)"
                )
              }
            />
          </span>
        </Link>
      </motion.div>
    </div>
  );
};

export default NotFound;

父组件中函数的优化示例 #

import React, { useCallback } from "react";
import NotFound from "./NotFound";

const ParentComponent = () => {
  // 用useCallback包裹函数，依赖数组中放入函数内部用到的变量
  const chageFooterColorsHandler = useCallback((bgColor, textColor) => {
    // 这里是你的函数逻辑，比如修改footer的样式
    document.querySelector(".footer").style.backgroundColor = bgColor;
    document.querySelector(".footer-text").style.color = textColor;
  }, []); // 若函数依赖其他状态/属性，需添加到此处

  return (
    <div>
      <NotFound chageFooterColorsHandler={chageFooterColorsHandler} />
    </div>
  );
};

export default ParentComponent;

方案二：临时忽略警告（不推荐） #

如果你能确保chageFooterColorsHandler在组件生命周期中不会变化，且仅需执行一次，可以添加ESLint注释跳过检查，但这种方式可能隐藏后续的bug，不建议长期使用：

useEffect(() => {
  chageFooterColorsHandler("#0e37633c", "#0E3763");
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

内容的提问来源于stack exchange，提问作者Cihat Turgut