React中useEffect与useCallback报依赖缺失错误如何处理？

两个报错均是React hooks依赖校验规则触发的提醒：

1. 第一个报错是因为useEffect回调中调用了loadAllProducts函数，依赖数组未包含该函数，不符合校验规则。
2. 用useCallback包裹loadAllProducts的优化思路正确，但第二个报错是因为回调内部引用了外部state变量error，useCallback的依赖数组为空未包含该变量，因此触发校验。

核心问题点 #

你在请求回调中打印的error是组件渲染时闭包捕获的旧值，就算将error加入useCallback依赖数组，打印的也不是setError更新后的最新值，属于无效逻辑，且是引入额外依赖的根源。

最优解决方案 #

直接将console.log(error)替换为console.log(data.error)，既不影响调试需求，也不需要引入外部error变量作为依赖，两个报错直接解决。同时顺便修正渲染逻辑的语法错误{product}.name为{product.name}。

修正后完整代码如下：

import { useState, useEffect, useCallback } from 'react';
// 此处补充你原有getProducts方法的引入逻辑

export default function Home() {
  const [products, setProducts] = useState([]);
  const [error, setError] = useState(false);

  const loadAllProducts = useCallback(() => {
    getProducts()
    .then(data => {
        if (data.error) {
            setError(data.error);
            // 直接打印接口返回的error，不引用外部state变量
            console.log(data.error);
        } else {
            setProducts(data);
        }
    });
  },[]);

  useEffect(() => {
    loadAllProducts();
  }, [loadAllProducts]);

  return(
    <div>
        <h1>Home Component</h1>
        <div className="row">
            {products.map( (product, index) => {
                return(
                    <div key={index}>
                        <h1>{product.name}</h1>
                    </div>
                );
            })}
        </div>
    </div>
  );
}

可选方案 #

如果你确实需要监听state中error的变化做其他处理，可以单独写useEffect监听error：

useEffect(() => {
  if (error) {
    // 此处处理error变化后的逻辑，比如弹窗提示、打印等
    console.log(error)
  }
}, [error])

内容的提问来源于stack exchange，提问作者Raiz Ahmed