react挂钩使用效果更新window.innerHeight

Question

我想在调整屏幕大小时用内部窗口高度更新状态。当我在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);
}, []);

Answer 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中，这样它就不会在每个呈现上重新声明

Answer 2

@Galupuf的上述Answer不会理想工作，除非您在addEventListener:下面添加updateWindowDimensions调用

window.addEventListener("resize", updateWindowDimensions);
updateWindowDimensions()

因为在您调整大小之前，eventListener不会运行此函数。所以在调整大小之前，高度将保持为0。

Answer 3

我知道现在回答已经太晚了，但我们可以为此定义一个钩子。在这里你可以找到一个自定义挂钩，每次调整大小时都会更新窗口的宽度和高度。