Как получить обновленное значение состояния в хуке React useEffect

Question

Я слушаю событие прокрутки в функции для функции нумерации страниц. Событие прокрутки вызывается внутри хука useEffect. Когда запускается событие прокрутки, я хочу сделать HTTP-вызов со значением, уже установленным в состоянии, и обновить это значение, если запрос HTTP успешен.

Однако, когда событие запускается, оно использует только начальное значение элемента в состоянии, даже если значение было обновлено, и я вижу обновленное значение вне функции.

Как получить обновленное значение в обратном вызове onScroll?

Ниже приведен фрагмент кода

 const [test, setTest] = useState(0);

  // The below commented out code works because it's not inside useEffect
  // window.addEventListener('scroll', () => requestAnimationFrame(() => {
  //   console.log(test);
  //   setTest(test + 1);
  // }));

  useEffect(() => {
    window.addEventListener('scroll', () => requestAnimationFrame(() => {
      console.log(test); // this always returns 0
      setTest(test + 1);
    }));
  }, [])

  console.log(test); // this returns the updated/correct value.

Answer 1

Предоставляя пустой массив в качестве второго аргумента эффекта, вы сказали, что реагируйте никогда не создавать этот эффект заново. Так что это происходит только один раз, и переменные, которые он имеет при закрытии, никогда не изменятся.

Опция 1:

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

useEffect(() => {
  const callback = () => requestAnimationFrame(() => {
    setTest(test + 1);
  })
  window.addEventListener('scroll', callback);
  return () => window.removeEventListener('scroll', callback);
}) // <------

Вариант 2:

Поскольку единственное, что вам нужно обновить, это последнее значение состояния, вы можете использовать версию обратного вызова setTest. React передаст вам последнее значение, и вы можете рассчитать изменение на основе этого.

Вы по-прежнему хотите иметь функцию разрыва, чтобы слушатель мог быть удален, если этот компонент отключен:

useEffect(() => {
  const callback = () => requestAnimationFrame(() => {
    setTest(prev => prev + 1); // <------ 
  })
  window.addEventListener('scroll', callback);
  return () => window.removeEventListener('scroll', callback);
}, [])