时间戳

首页 > 解决方案 > 在 useEffect 挂钩中从窗口中删除滚动事件侦听器时遇到一些问题

javascript - 在 useEffect 挂钩中从窗口中删除滚动事件侦听器时遇到一些问题

问题描述

我正在尝试锁定然后有条件地解锁窗口滚动useEffect。似乎当我去删除滚动事件侦听器时，它与要删除的引用函数不匹配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}
    />
  )
}

标签： javascriptreactjsscrolldom-events

解决方案

原因scrollEvent是每次渲染都会重新创建，因此它们的引用将不匹配。最简单的方法是将scrollEvent定义移到组件之外，因此它不是生命周期的一部分：

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

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

推荐阅读