useNavigate()挂钩和onWheel事件出现问题

Question

我需要使用onWheel事件切换路线。如果onWheel事件的deltaY属性>0，我调用useNavigate钩子来更改路线。问题是，当返回时，路线的更改次数与我转动鼠标滚轮的次数一样多。如何修复此错误？

const navigate = useNavigate()
const handleWheel = (e) => {
e.deltaY > 0 && navigate("/newRoute")
}

Answer 1

鼠标滚轮和滚动事件是出了名的噪音。当条件满足时，尝试删除事件侦听器，或者设置一些"；状态"；这是"；"已处理"；因此仅触发1个导航动作。

示例：

const navigateRef = React.useRef();
const navigate = useNavigate();
const handleWheel = (e) => {
if (e.deltaY > 0 && !navigateRef.current) {
navigateRef.current = true;
navigate("/newRoute");
}
}