时间戳

首页 > 解决方案 > 使用 useEffect 和 useState 避免 ESLint 'react-hooks/exhaustive-deps' 警告

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

问题描述

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

标签： dependencieseslintuse-effectuse-state

解决方案

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

所以你可以改为：

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

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

推荐阅读