Избегайте предупреждений ESLint о «перехватах / исчерпывающих действиях» с помощью useEffect & useState

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, без без добавления formValues в качестве зависимости или с добавлением // eslint-disable-next-line react-hooks/exhaustive-deps?

Я попытался посмотреть репо, и ближе всего я нашел этот , который, похоже, не упоминал об этой конкретной работе.

Answer 1

Вы можете передать функцию в функцию set, которая имеет в качестве первого параметра текущее значение этого состояния и устанавливает для этого состояния значение, которое вы возвращаете в этой функции.

Таким образом, вы можете вместо этого сделать:

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

И так как вы не используете состояние formValues ​​где-либо на useEffect, вы можете избежать его добавления в массив deps