React Hooks:状态总是设置回初始值

React Hooks: State always setting back to initial value

切换到反应钩子并第一次使用它们。我的状态似乎总是被设置回我传递给它的初始值 (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>
  );
}

useEffect 钩子接受第二个参数,一个数组。 如果该数组中的某些值发生变化,则 useEffect 挂钩将再次 运行

如果您将该数组留空,useEfect 将 运行 仅当组件挂载时 -(基本上类似于 ComponentDidMount 生命周期方法)

如果您省略该数组 useEffect 将 运行 每次组件重新呈现

例如:

useEffect 运行s 仅一次,当组件挂载时:

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

每次组件重新渲染时使用 运行s:

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

useEffect 运行仅当其中一些变量发生变化时:

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

此外,如果您在 useEffect 挂钩中设置 return 语句,它必须 return 一个函数,并且该函数将始终 运行 在 useEffect 渲染之前

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

使用带钩子的 setInterval 不是很直观。示例见此处:. For a more in-depth explanation you can read this https://overreacted.io/making-setinterval-declarative-with-react-hooks.

这个 useInterval 自定义挂钩也非常易于使用 https://github.com/donavon/use-interval。 (这不是我的 - 我在之前回复后 运行 穿过这个)