[英]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仅运行一次:
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");
};
}, []);
将setInterval
与钩子配合使用不是很直观。 参见此处的示例: https : //stackoverflow.com/a/53990887/3984987 。 有关更深入的说明,您可以阅读此https://overreacted.io/making-setinterval-declarative-with-react-hooks 。
这个useInterval
自定义钩子也非常易于使用https://github.com/donavon/use-interval 。 (这不是我的-我较早回答后就遇到了这个问题)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.