React перехватывает функциональное обновление, вызывающее ошибку eslint no-shadow

Question

Я использую React useEffect для обновления состояния. Эслинт предупреждает, что я делаю ошибку без тени. Я думаю, это связано с некоторыми настройками плагина eslint или eslint, потому что CRA не вызывает такую ​​же ошибку. Как это исправить?

function Sample(props) {
  const { flag } = props;
  const [value, setValue] = useState();

  useEffect(() => {
    if (flag) {
      setValue(value => value + 1);
    }
  }, [flag]);
}

Вот, setValue(value => value + 1); значение вызывает отсутствие тени из-за объявления в useState.

Answer 1

Eslint правильно жалуется, потому что вы объявили value переменная в вашем useStateкрючок, но затем вы повторно объявляете другую переменную с именемvalue в вашем useEffect крючок.

Самое простое решение - не затенять имя переменной, изменив переменную в вашем setValue вызов -

useEffect(() => {
  if (flag) {
    setValue(prev => prev + 1);
  }
}, [flag]);