我想在调整屏幕大小时使用内部窗口高度更新状态。当我在 useEffect
中记录状态高度时钩子(Hook)我每次都得到 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);
}, []);
最佳答案
您的 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
中。所以它不会在每次渲染时重新声明
关于javascript - react 钩子(Hook) useEffect 更新 window.innerHeight,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60642486/