[英]React.js State not updating in Event Listener in useEffect Hook
[英]React.js: useEffect with window resize event listener not working
我正在使用此代码侦听 function 组件中的调整大小事件,并在调整 window 的大小时重新呈现组件。 问题是,任何一个事件监听器都没有打印出来,所以我想我对我在这里如何使用 useEffect 有误解。
const [dimensions, setDimensions] = React.useState({
width: window.innerWidth,
height: window.innerHeight,
});
useEffect(() => {
const handleResize = () => {
console.log(dimensions.width);
setDimensions({
width: window.innerWidth,
height: window.innerHeight,
});
window.addEventListener("load", handleResize, false);
window.addEventListener("resize", handleResize, false);
};
});
const [dimensions, setDimensions] = React.useState({
width: window.innerWidth,
height: window.innerHeight,
});
console.log(dimensions);
const handleResize = () => {
setDimensions({
width: window.innerWidth,
height: window.innerHeight,
});
}
React.useEffect(() => {
window.addEventListener("resize", handleResize, false);
}, []);
import { useState, useEffect } from "react";
// Usage
function App() {
const size = useWindowSize();
return (
<div>
{size.width}px / {size.height}px
</div>
);
}
// Hook
function useWindowSize() {
// Initialize state with undefined width/height so server and client renders match
// Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
const [windowSize, setWindowSize] = useState({
width: undefined,
height: undefined,
});
useEffect(() => {
// Handler to call on window resize
function handleResize() {
// Set window width/height to state
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
}
// Add event listener
window.addEventListener("resize", handleResize);
// Call handler right away so state gets updated with initial window size
handleResize();
// Remove event listener on cleanup
return () => window.removeEventListener("resize", handleResize);
}, []); // Empty array ensures that effect is only run on mount
return windowSize;
}
我发现“resize”上的事件侦听器不足以在页面的初始加载中填充 window 尺寸。 以下对我有用。
function getWindowDimensions() {
const {innerWidth: width, innerHeight: height} = window;
return {
width,
height
};
}
function useWindowDimensions() {
const defaultDim = {width: null, height: null}
const [windowDimensions, setWindowDimensions] = useState(defaultDim);
useEffect(() => {
setWindowDimensions(getWindowDimensions()) // Necessary to make sure dimensions are set upon initial load
function handleResize() {
setWindowDimensions(getWindowDimensions());
}
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return windowDimensions;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.