簡體   English   中英

反應鈎。 為什么不設置功能改變狀態?

[英]React hooks. Why doesn't set function change state?

const Navbar = () => {
  const prevScrollY = React.useRef<number>();

  const [isHidden, setIsHidden] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => {
      const scrolledDown = window.scrollY > prevScrollY.current!;
      console.log(`is hidden ${isHidden}`);
      if (scrolledDown && !isHidden) {
        setIsHidden(true);
        console.log(`set hidden true`);
      } else if (!scrolledDown && isHidden) {
        console.log(`set hidden false. THIS NEVER HAPPENS`);
        setIsHidden(false);
      }

      prevScrollY.current = window.scrollY;
    };

    console.log("adding listener");

    window.addEventListener("scroll", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
    };
  }, []);

  return isHidden ? null : <div>navbar</div>;
};

完整的例子

console.log(`is hidden ${isHidden}`); 總是打印false,並且setIsHidden(true)總是被觸發但似乎永遠不會改變狀態。 為什么? 除了useState初始化之外,isHidden基本上不會設置為false。

基本上會發生的事情是你的useEffect在mount和unmount上只運行兩次( 這顯然是故意的 ),但是這樣做的不良副作用是你在onScroll方法中檢查的isHidden的值被isHidden了初始值(為false ) - 永遠( 直到卸載 )。

您可以使用setter的函數形式,它接收狀態的實際值並將所有分支邏輯放入其中。 就像是:

  setIsHidden(isHidden => { // <- this will be the proper one
     const scrolledDown = window.scrollY > prevScrollY.current!;
     console.log(`is hidden ${isHidden}`);
     if (scrolledDown && !isHidden) {
        console.log(`set hidden true`);
        return true;  
      } else if (!scrolledDown && isHidden) {
        console.log(`set hidden false. THIS NEVER HAPPENS`);
        return false;
      } else {
        // ...

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM