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

Question

我正在使用 useEffect()通过“useState”调用更新某些状态的钩子(Hook):

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 ，这似乎没有提到这个特殊的解决方法。

Answer 1

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

所以你可以改为:

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

并且当您不使用 formValues 状态的任何地方 useEffect 时，您可以避免将其添加到 deps 数组