React使用useEffect调用简单函数出现缺少依赖报错问题咨询

这个报错是React官方ESLint规则react-hooks/exhaustive-deps的静态检查提示，并非运行时错误，规则要求所有在useEffect内部使用的外部变量都必须声明在依赖数组中，避免闭包陷阱导致的逻辑异常。

两种修改方案的影响 #

• 移除依赖数组：相当于不传入第二个参数给useEffect，此时effect会在组件每次渲染完成后都执行，不管是状态更新、props变化还是父组件重渲染触发的当前组件重渲染，都会重新调用拉取接口的逻辑，完全不符合你仅挂载执行一次的需求，还会产生大量无效请求，不建议采用。
• 直接将fetchProducts加入依赖数组：由于你当前的fetchProducts是定义在组件内部的普通函数，组件每次重渲染时都会生成新的函数引用，会被useEffect判定为依赖变化，最终效果和移除依赖数组几乎一致，依然会每次渲染都执行拉取逻辑，也不符合需求。

当前写法是否能满足业务需求 #

如果你的fetchProducts内部永远不会依赖组件内的可变状态（比如props、其他自定义state），当前写法运行时确实可以实现仅挂载时拉取一次数据的需求，功能是正常的，但属于不符合ESLint规范的写法，后续如果修改fetchProducts逻辑引入了其他可变依赖，很容易触发闭包问题导致拿到旧的变量值，出现隐性bug。

推荐的规范写法 #

你可以选择以下两种常用方案解决警告，同时保留仅挂载执行一次的逻辑：

方案1：将请求函数移入useEffect内部 #

如果这个请求函数不需要在effect以外的地方调用，直接把函数定义放到effect内部即可，消除外部依赖：

useEffect(() => {
  // Fetch Products
  const fetchProducts = async () => {
    const { data } = await axios.get('/api/products')
    setProducts(data)
  }
  fetchProducts()
}, [setProducts])
// useState返回的set函数引用永远稳定，因此effect只会执行一次

方案2：用useCallback包裹请求函数 #

如果这个函数需要在组件其他位置复用，用useCallback包裹保证引用稳定：

// Fetch Products
const fetchProducts = useCallback(async () => {
  const { data } = await axios.get('/api/products')
  setProducts(data)
}, [setProducts])

// Retrieve all products at reload
useEffect(() => {
  fetchProducts()
}, [fetchProducts])
// 被useCallback包裹的fetchProducts引用永远稳定，effect只会执行一次

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