使用 useEffect 和 useState 避免 ESLint 'react-hooks/exhaustive-deps' 警告答案

【问题标题】：Avoiding ESLint 'react-hooks/exhaustive-deps' warnings with useEffect & useState使用 useEffect 和 useState 避免 ESLint 'react-hooks/exhaustive-deps' 警告
【发布时间】：2020-06-22 12:07:53
【问题描述】：

我正在使用 useEffect() 挂钩通过“useState”调用更新某些状态：

useEffect(
  () => {
    const newProps = {}

    departments.forEach(dept => {
      const { code } = dept
      const newCode = code.toLowerCase()
      newProps[newCode + '_reviewer'] = ''
    })

    setFormValues({ ...formValues, ...newProps })
  },
  [departments]
)

毫无疑问，ESLint 给了我一个警告formValues：

React Hook useEffect has a missing dependency: 'formValues'.

但是，它继续提到：

Either include it or remove the dependency array.
You can also do a functional update 'setFormValues(f => ...)'
if you only need 'formValues' in the 'setFormValues' call

react-hooks/exhaustive-deps

我对神秘的“setFormValues(f => ...)”方法很感兴趣。这到底是什么意思？我应该如何重写setFormValues({ ...formValues, ...newProps }) 以避免ESLint 警告，不添加formValues 作为依赖或添加// eslint-disable-next-line react-hooks/exhaustive-deps？

我试过查看 repo，最接近的是this，它似乎没有提到这个特殊的解决方法。

【问题讨论】：

标签： dependencies eslint use-effect use-state

【解决方案1】：

您可以将一个函数传递给以该状态的当前值作为第一个参数的 set 函数，并将该状态设置为您在该函数中返回的值。

所以你可以这样做：

setFormValues(fValues => ({...fValues, ...newProps}));

当你不使用 formValues 状态的 useEffect 时，你可以避免将它添加到 deps 数组中

【讨论】：