React Hooks: состояние всегда возвращается к исходному значению - PullRequest
Новая
       33

React Hooks: состояние всегда возвращается к исходному значению

1 голос
/ 08 мая 2019

Переключение на реагирующие крючки и их использование в первый раз.Кажется, мое состояние всегда возвращается к исходному значению, которое я передаю (0).Код для автоматической прокрутки страницы вниз и вверх.Страница просто практика для отображения различных типов файлов.Что происходит, если переменная scrollDir переключится на 1 или -1 и 0. Таким образом, консоль будет отображать 1,0,1,0,1,0,1,0 и т. Д. Как получить состояниеостаться во время обновления?

function App(props) {

  const [scrollDir, setScrollDir] = useState(0);

  function scrollDown() {
    if(document.documentElement.scrollTop < 10)
    {
      setScrollDir(1);
    }
    else if(document.documentElement.scrollTop >= document.documentElement.scrollHeight - window.innerHeight)
    {
      setScrollDir(-1);
    }

    window.scrollBy(0, scrollDir);
  }

  useEffect(() => {
    setInterval(scrollDown, 100);
  });

  return (
    <StackGrid monitorImagesLoaded={true} columnWidth={"33.33%"} >
      <img src={posterPNG} />
      <img src={posterJPG} />
      <img src={posterGIF} />
      <video src={posterMP4} loop autoPlay muted />
      <Document file={posterPDF}>
        <Page pageNumber={1} />
      </Document>
    </StackGrid>
  );
}

Ответы [ 2 ]

1 голос
/ 08 мая 2019

Использование setInterval с крючками не очень интуитивно понятно. Смотрите здесь для примера: https://stackoverflow.com/a/53990887/3984987. Для более подробного объяснения вы можете прочитать это https://overreacted.io/making-setinterval-declarative-with-react-hooks.

Этот useInterval пользовательский хук также довольно прост в использовании https://github.com/donavon/use-interval. (Это не мое - я столкнулся с этим после ответа ранее)

1 голос
/ 08 мая 2019

крючок useEffect принимает второй аргумент - массив.Если какое-либо значение в этом массиве изменится, то ловушка useEffect будет запущена снова

Если вы оставите этот массив пустым, useEfect будет работать только при монтировании компонента - (в основном, как метод жизненного цикла ComponentDidMount)

И если вы пропуститеэтот массив useEffect будет запускаться каждый раз, когда компонент перерисовывает

Например:

useEffect запускается только один раз, когда компонент монтируется: 

useEffect(() => {
 //code 
},[]);

useEffect запускается каждый раз, когда компонент перерисовывается: 

useEffect(() => {
 //code 
});

useEffect запускается только при изменении некоторых из этих переменных: 

let a = 1;
let b = 2;
    useEffect(() => {
     //code 
    },[a,b]);

Кроме того, если вы установите оператор return в хуке useEffect, он должен возвращать функцию, и эта функция всегда будетвыполнить перед использованиемEffect render 

  useEffect(() => {
    // code
    return () => {
      console.log("You will se this before useEffect hook render");
    };
  }, []);
...