我要在调整屏幕大小时使用内部窗口高度更新状态。当我在useEffect
挂钩中记录状态高度时,每次都会得到0,但是,当我在updateWindowDimensions
函数内部进行记录时,高度值将按预期更新。
如何每次都用新值更新状态?
const [height, setHeight] = useState(0);
const updateWindowDimensions = () => {
const newHeight = window.innerHeight;
setHeight(newHeight);
console.log('updating height');
};
useEffect(() => {
window.addEventListener('resize', updateWindowDimensions);
console.log("give height", height);
}, []);
答案 0 :(得分:1)
安装组件时,您的useEffect
仅运行一次(由于空数组[]
是作为第二个参数传递的)
如果您只是在其外部登录,则会看到状态值正在正确更新
const [height, setHeight] = useState(0);
useEffect(() => {
const updateWindowDimensions = () => {
const newHeight = window.innerHeight;
setHeight(newHeight);
console.log("updating height");
};
window.addEventListener("resize", updateWindowDimensions);
return () => window.removeEventListener("resize", updateWindowDimensions)
}, []);
console.log("give height", height);
此外,您还应该在useEffect
内移动该函数的声明,以免在每个渲染器上都重新声明该函数。