类型错误:无法读取属性偏移顶部的空反应.已卸载的组件

Question

我制作的 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 属性 - 但这不起作用。

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

啪！

Answer 1

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

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