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

Question

我正在使用 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 警告，without 添加 formValues 作为依赖 or 添加一个 // eslint-disable-next-line react-hooks/exhaustive-deps ?

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

Answer 1

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

所以你可以改为：

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

并且由于您不在 useEffect 的任何位置使用 formValues 状态，因此您可以避免将其添加到 deps 数组

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

Avoiding ESLint 'react-hooks/exhaustive-deps' warnings with useEffect & useState

dependencies

eslint

use-effect

use-state