切换到 react 钩子(Hook)并第一次使用它们。我的状态似乎总是被设置回我传递给它的初始值 (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 钩子(Hook)接受第二个参数,一个数组。 如果该数组中的某些值发生变化,则 useEffect Hook 将再次运行
如果您将该数组留空,useEfect 将仅在组件挂载时运行 -(基本上类似于 ComponentDidMount 生命周期方法)
如果您省略该数组,useEffect 将在每次组件重新渲染时运行
例如:
useEffect 仅在组件挂载时运行一次:
useEffect(() => {
//code
},[]);
useEffect 在每次组件重新渲染时运行:
useEffect(() => {
//code
});
useEffect 仅在其中一些变量发生变化时运行:
let a = 1;
let b = 2;
useEffect(() => {
//code
},[a,b]);
此外,如果你在 useEffect 钩子(Hook)中设置 return 语句,它必须返回一个函数,并且该函数将始终在 useEffect 渲染之前运行
useEffect(() => {
// code
return () => {
console.log("You will se this before useEffect hook render");
};
}, []);
关于javascript - react Hook : State always setting back to initial value,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56030503/