React Hook useEffect依赖缺失问题求助（React Hook Form场景）

问题原因 #

你的useEffect钩子内部使用了errors对象的属性（errors.email、errors.message、errors.name、errors.phone）以及isSubmitSuccessful、reset等变量，但依赖数组是空的。ESLint的react-hooks/exhaustive-deps规则要求必须把所有用到的外部依赖都加入数组，否则可能导致闭包过时，引发逻辑错误。

解决方案 #

步骤1：补充完整的依赖数组 #

将useEffect中用到的所有外部变量都加入依赖数组，这是最直接解决警告的方式：

useEffect(() => {
  const FormOnSubmit = () => {
    if (errors.email || errors.message || errors.name || errors.phone) {
      setShowSuccess(false)
    }

    if (isSubmitSuccessful) {
      setShowSuccess(true)

      reset({
        name: "",
        email: "",
        phone: "",
        message: ""
      })

      setNewMessage({ name: "", email: "", phone: "", message: "" })
    }
  }

  FormOnSubmit()
}, [errors, isSubmitSuccessful, reset, setShowSuccess, setNewMessage])

步骤2：优化onSubmit函数依赖（可选，更规范） #

你的onSubmit函数原本依赖newMessage，但实际可以直接用参数data更新状态，无需依赖外部状态，减少不必要的重渲染：

const onSubmit: SubmitHandler<Contact> = useCallback(
  (data) => {
    return new Promise<void>((resolve) => {
      resolve()
      setIsSubmitted(true)
      setPersonName(data.name)
      console.table(data)
      // 直接用传入的data覆盖状态，无需展开newMessage
      setNewMessage(data)
    })
  },
  [] // 不再需要依赖newMessage
)

步骤3：移除冗余状态同步（可选，简化逻辑） #

你同时维护了newMessage本地状态和react-hook-form的表单状态，其实可以直接用react-hook-form提供的watch或getValues获取表单值，无需自己维护状态，减少同步复杂度：

• 删除newMessage状态定义
• 表单输入的value改用watch结果（比如watch('name')）
• 删除handleInputChange中的setNewMessage逻辑

为什么包裹函数没用？ #

你把逻辑包裹在FormOnSubmit函数里，但ESLint依然能检测到函数内部引用了外部依赖，所以必须把这些依赖加入useEffect的依赖数组，警告才会消失。

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