React useEffect 能否使用预定义变量作为依赖数组？

警告原因 #

你第一种写法触发react-hooks/exhaustive-deps警告，是因为ESLint的React Hooks规则是静态分析依赖数组，它只能识别直接写在数组字面量里的变量，没法解析你外部定义的states数组内部包含的依赖项，因此会判定你漏写了依赖。

最优方案：用单个对象存储所有表单字段 #

这是最简洁、也最符合React设计逻辑的方案，所有表单字段统一存在一个state对象中，无需维护零散的多个state：

// 统一存储表单字段
const [form, setForm] = useState({
  name: '',
  email: '',
  password: '',
  // 后续新增字段直接在这里加即可
})

// 更新字段的写法（必须用不可变更新，保证引用变化触发effect）
const handleFieldChange = (field, value) => {
  setForm(prev => ({...prev, [field]: value}))
}

useEffect(() => {
  someFunction({ states: Object.values(form) })
}, [form])

新增表单字段时只要修改form的初始化结构即可，无需动effect的依赖数组。

方案二：封装自定义Hook复用逻辑 #

如果你已经维护了零散的表单state、不想重构为单个对象，可以封装自定义Hook简化重复代码：

// 全局通用自定义Hook，定义一次可在所有表单组件中复用
const useFormEffect = (callback, formFields) => {
  useEffect(() => {
    callback(formFields)
  // 依赖取传入对象的所有值
  }, Object.values(formFields))
}

// 业务组件中使用
const [name, setName] = useState('')
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')

useFormEffect((fields) => {
  someFunction({ states: Object.values(fields) })
// 只需传一次字段对象，不用重复写两次数组
}, { name, email, password })

如果需要ESLint对这个自定义Hook做依赖检查，可以在文件顶部加如下注释：

/* eslint react-hooks/exhaustive-deps: ["warn", { additionalHooks: "useFormEffect" }] */

不推荐的临时方案 #

如果只是临时调试不想改代码，可以直接在依赖数组行加ESLint忽略注释，但非常不建议长期使用，后续新增字段时不会有依赖漏写的提示，容易出bug：

const states = [name, email, password]

useEffect(() => {
  someFunction({ states })
// eslint-disable-next-line react-hooks/exhaustive-deps
}, states)

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