React Hooks: setState ведет себя странно внутри useEffect - PullRequest
Новая
       7

React Hooks: setState ведет себя странно внутри useEffect

0 голосов
/ 22 октября 2019

У меня есть компонент, который я хотел бы сохранить позицию прокрутки каждый раз, когда он перерисовывает.

Поэтому я создал useState для его позиции. Внутри useEffect я создал интервал, который будет отслеживать текущую позицию каждые x секунд и устанавливать ее с помощью setState.

Кажется, что до этого момента все работало нормально, потому что когда я консоль регистрирую состояние (scrollTop) внутри useEffect, я получаю обновленные числа.

Я отслеживаю элемент, устанавливая его как ссылку с помощью useRef. 

const [scrollState, setScrollState] = useState(0);
const element = useRef<HTMLDivElement>(null);

useEffect(() => {
  console.log(scrollState);

  const captureElementScroll = setInterval(() => {
    if (element.current) {
      const scrollTop = _.get(element.current, "scrollY");
      setScrollState(scrollTop);
    }
  }, 2000);

  if (element.current && element.current) {
    element.current.scrollTo({
      behavior: "smooth",
      top: scrollState
    });
  }

  return () => {
    clearInterval(captureElementScroll);
  };
}, [scrollState]);

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

Может быть, проблема с родительскими компонентами? У меня нет идей. Я делаю это правильно?

...