方法一: 去掉useEffect的第二个参数
例如以下代码 错误实例
const[zoom, setZoom] = useState(0);
useEffect(() = >{
document.getElementById('workspace-content').addEventListener('mousewheel', scrollFunc);
},[]);
function scrollFunc(e) {
setZoom(zoom + 5)
}
会出现zoom永远等于 0+5, 而不是所谓的5, 10 ,15 为什么会这样呢? 因为useEffect执行时,会创建一个闭包,在每次监听到mousewheel运行时 闭包内部保存了zoom的初始化值 每次调用的时候都是取的初始化值0 所有会一直为0+5
怎么解决呢?
解决方案: 去掉useEffect中的空数组即可
const[zoom, setZoom] = useState(0);
useEffect(() = >{
document.getElementById('workspace-content').addEventListener('mousewheel', scrollFunc);
return () = >document.getElementById('workspace-content').removeEventListener("mousewheel", scrollFu