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

时间:2019-05-07 21:09:05

标签: javascript reactjs react-hooks react-state

切换到反应挂钩,并首次使用它们。我的状态似乎总是被设置回我通过的初始值(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 个答案:

答案 0 :(得分:1)

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

如果将该数组留空,则useEfect仅在组件装入时运行((基本类似于ComponentDidMount生命周期方法)

如果您忽略该数组,则每次组件重新渲染时useEffect都会运行

例如:

useEffect在组件安装时仅运行一次:

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

useEffect每次在组件重新渲染时运行:

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

useEffect仅在以下某些变量发生更改时运行:

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

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

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

答案 1 :(得分:0)

setInterval与钩子配合使用不是很直观。有关示例,请参见此处:https://stackoverflow.com/a/53990887/3984987。有关更深入的说明,请阅读此https://overreacted.io/making-setinterval-declarative-with-react-hooks

useInterval自定义钩子也非常易于使用https://github.com/donavon/use-interval。 (不是我的-我在稍早回复后就遇到了这个问题)