类型错误：无法读取 null 反应的属性 offsetTop。未安装的组件答案

【问题标题】：Type error: Cannot read property offsetTop of null react. Unmounted component类型错误：无法读取 null 反应的属性 offsetTop。未安装的组件
【发布时间】：2020-10-26 19:36:19
【问题描述】：

我制作的 react 组件有问题，一旦用户滚动到页面上的某个点，它就会将其子组件动画化。动画功能工作正常，但卸载时会引发错误。

我在一个页面上使用这个组件，它会根据屏幕大小卸载这个组件。

然而，一旦这个组件因为屏幕被调整大小而被卸载，我就会得到一个类型错误，它仍在尝试读取用于定位屏幕上元素高度的引用的 offsetTop 属性，这已经不存在了。

export const AppearHOC = ({children, isMobile}) => {

      const [isVisible, setVisible] = useState(false)
      const myRef = useRef()
      
      useEffect(() => {

                  const checkHeight = (ref) => {
                        
                        const elementHeight = ref.current.offsetTop - 500
                        
                        if (window.pageYOffset > elementHeight && isVisible === false) {
                              setVisible(true)
                        } else if (window.pageYOffset < elementHeight && isVisible === true) {
                              setVisible(false)
                        }
                  }
                  // Check scroll height and change visible state if necessary
                  
                  window.addEventListener('scroll', () => checkHeight(myRef), {passive: true})
                  return () => {
                        window.removeEventListener('scroll', () => checkHeight(myRef), {passive: true});
                  }
            
      }, [myRef, isVisible, isMobile])

      return(
            <ComponentContainer ref={myRef}>
                  <CSSTransition
                        in={isVisible ? true : false}
                        classNames={'appear'}
                        timeout={1000}
                        unmountOnExit
                        ref={myRef}
                  >
                        <ComponentSlider>
                              {children}
                        </ComponentSlider>
                  </CSSTransition>
                  <CSSTransition
                        in={isVisible ? false : true}
                        classNames={'appear'}
                        timeout={1000}
                        unmountOnExit
                        
                  >
                        <ComponentScrollHint icon={faChevronDown}/>
                  </CSSTransition>
            </ComponentContainer>
      )
}

我曾尝试使用“isMobile”属性让函数在必要时读取 offsetTop 属性之前返回 - 但这不起作用。

谁能告诉我我做错了什么？

TIA！

【问题讨论】：

标签： javascript reactjs react-hooks jsx

【解决方案1】：

当您执行window.removeEventListener('scroll', () => checkHeight(myRef), {passive: true}) 时，您实际上是在删除一个从未注册过的处理程序。您实际注册的那个没有被删除，因为您使用了匿名箭头函数并且没有引用它。你可以这样做：

const handler = () => checkHeight(myRef);
// ... register
window.addEventListener('scroll', handler, {passive: true});
// ... later
window.removeEventListener('scroll', handler);

【讨论】：