react hooks 中使用 addEventListener 监听事件无法访问到最新的 state 的问题
示例:
const Exposure = (props: IExposure) => {
const [hasAsyncData, SetHasAsyncData] = useState(false);
useEffect(() => {
if (props.asyncData) {
SetHasAsyncData(true);
}
}, [props.asyncData]);
useEffect(() => {
window.addEventListener("touchmove", handleMove, false);
window.addEventListener("scroll", handleMove, false);
return () => {
window.removeEventListener("touchmove", handleMove);
window.removeEventListener("scroll", handleMove);
};
}, []);
function handleMove() {
console.log(hasAsyncData);
}
return <div ref={measuredRef}></div>;
};
export default Exposure;
如上述代码所示,props.asyncData 变化之后 hasAsyncData 设置为 true,然后滚动页面,handleMove 中的 hasAsyncData 仍然为初始值 false。
所以这时要在 hasAsyncData 变化后,重新绑定 addEventListener 事件
useEffect(() => {
}, [hasAsyncData])在useEffect中将他监听起来,从新绑定
const Exposure = (props: IExposure) => {
const [hasAsyncData, SetHasAsyncData] = useState(false);
useEffect(() => {
if (props.asyncData) {
SetHasAsyncData(true);
}
}, [props.asyncData]);
useEffect(() => {
window.addEventListener("touchmove", handleMove, false);
window.addEventListener("scroll", handleMove, false);
return () => {
window.removeEventListener("touchmove", handleMove);
window.removeEventListener("scroll", handleMove);
};
}, [hasAsyncData]); //改动了这里
function handleMove() {
console.log(hasAsyncData);
}
return <div ref={measuredRef}></div>;
};
export default Exposure;
原文地址:https://blog.csdn.net/qq_59747594/article/details/135635639
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!