React Hook useEffect依赖缺失警告解决咨询：useEffect使用是否有误及修复方案

你并没有错误使用useEffect，这个警告是React的hooks规则在帮你规避潜在bug——它发现你的清理函数里用到了多个外部变量/函数，但你没有把它们加入依赖数组，React无法确定这些值变化时是否需要重新运行effect。

问题根源分析 #

先看你的clearClient函数和对应的reducer逻辑：

// 你定义的clearClient
function clearClient(c) { 
  dispatch({ type: 'CLEAR_CLIENT', payload: { row: c }, }) 
}

// reducer中的CLEAR_CLIENT处理
case 'CLEAR_CLIENT': 
  return { 
    ...state, 
    client: { /* 完全重置为初始状态 */ }, 
  }

其实你的CLEAR_CLIENT根本没用到payload里的row参数，直接把client重置成了初始值。这意味着你之前给clearClient传client参数完全是多余的，同理clearProducts(rows)、clearProductEdit(productEdit)里的参数也大概率是多余的（结合你的reducer逻辑来看）。

这种多余的参数传递，加上清理函数引用了这些变量，才触发了依赖警告。

最优解决方案：优化清理函数+符合hooks规则 #

我推荐你按以下步骤修改，既消除警告又优化代码逻辑：

1. 简化清理函数，去掉不必要的参数
   既然reducer不需要这些参数，直接精简函数并用useCallback包裹（保证函数引用稳定）：

   const clearClient = useCallback(() => {
     dispatch({ type: 'CLEAR_CLIENT' })
   }, [dispatch])
   
   const clearProducts = useCallback(() => {
     dispatch({ type: 'CLEAR_PRODUCTS' })
   }, [dispatch])
   
   const clearProductEdit = useCallback(() => {
     dispatch({ type: 'CLEAR_PRODUCT_EDIT' })
   }, [dispatch])
   

   注：dispatch是稳定的（组件重渲染时不会改变），所以这些函数的引用也会保持稳定，不会导致useEffect频繁触发。

2. 更新useEffect的依赖数组
   把简化后的清理函数加入依赖数组：

   useEffect(() => { 
     return () => { 
       clearClient() 
       clearProducts() 
       clearProductEdit() 
     } 
   }, [clearClient, clearProducts, clearProductEdit])
   

这样修改后，既完全符合React hooks的规则，消除了警告，还去掉了多余的参数传递，代码逻辑更清晰。

备选应急方案（不推荐） #

如果你确定这些依赖在组件生命周期内绝对不会变化，也可以用注释忽略警告，但这相当于关闭了React的安全检查，可能会隐藏未来的bug：

useEffect(() => { 
  return () => { 
    clearClient(client) 
    clearProducts(rows) 
    clearProductEdit(productEdit) 
  } 
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

除非你非常确定自己在做什么，否则不建议用这个方法。

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