Javascript 从useEffect钩子窗口中删除滚动事件侦听器时遇到问题

我正在尝试在

useffect

内有条件地锁定并解锁窗口滚动。当我删除滚动事件侦听器时，它似乎与删除时引用的函数

scrollEvent

不匹配

感谢您的帮助

export const Viewer = () => {
  const [view, setView] = useCustom()
  const enterView = Object.entries(view).length > 0

  const [animation, set, stop] = useSpring(() => ({
    slide: [100],
    opacity: [0],
  }))

  const scrollEvent = offsetY => () => {
    window.scrollTo({
      top: offsetY,
      behavior: "smooth",
    })
  }

  useEffect(() => {
    const offsetY = window.pageYOffset

    if (enterView) {
      set({ slide: [0], opacity: [1] })
      window.addEventListener("scroll", scrollEvent(offsetY), true)
      stop()
    } else {
      window.removeEventListener("scroll", scrollEvent(offsetY), true)
      set({ slide: [100], opacity: [0] })
    }
  }, [enterView])

  return (
    <ViewerComponent
      setView={setView}
      isActive={enterView}
      inAnimation={animation}
      data={view}
    />
  )
}

导出常量查看器=（）=>{
const[view，setView]=useCustom（）
const entreview=Object.entries（视图）.length>0
常量[动画、设置、停止]=useSpring（（）=>({
幻灯片：[100]，
不透明度：[0]，
}))
常量scrollEvent=offsetY=>（）=>{
window.scrollTo({
上图：越位，
行为：“平滑”，
})
}
useffect（（）=>{
const offsetY=window.pageYOffset
如果（enterView）{
集合（{幻灯片：[0]，不透明度：[1]}）
addEventListener（“滚动”，scrollEvent（offsetY），true）
停止（）
}否则{
window.removeEventListener（“滚动”，scrollEvent（offsetY），true）
集合（{幻灯片：[100]，不透明度：[0]}）
}
}，[enterView]）
返回(
)
}

原因是每次渲染都会重新创建

scrollEvent

，因此它们的引用不匹配。最简单的方法是将

scrollEvent

定义移到组件之外，因此它不是生命周期的一部分：

 const scrollEvent = offsetY => () => {
    window.scrollTo({
      top: offsetY,
      behavior: "smooth",
    })
  }

export const Viewer = () => {
  // ...

---

将函数拉到组件外部后仍无法删除事件。不知道是不是因为函数是咖喱做的。这是一个盖茨比网站，需要我调用窗口内的效果。