本文主要是介绍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;
这篇关于react hooks 中使用 addEventListener 监听事件无法访问到最新的 state 的问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
