React Hooks滚动监听导致已卸载组件状态更新报错如何解决

问题原因 #

你写的useEffect清理逻辑存在错误，组件卸载时没有移除之前绑定的滚动监听事件，反而新增了一次监听。未被移除的事件在页面滚动时仍然会触发，尝试更新已经卸载的首页组件状态，因此触发了内存泄漏告警。

修复方案 #

直接修正useEffect的清理逻辑，在组件卸载时调用removeEventListener移除滚动监听即可：

useEffect(() => {
    window.addEventListener('scroll', handleDisplays)
    // 清理函数：组件卸载时移除监听
    return  () => {
        window.removeEventListener('scroll', handleDisplays)
    } 
}, [])

如果想要做更稳妥的兜底，可以新增组件挂载状态标识，避免极端情况下的状态更新报错：

useEffect(() => {
    // 组件挂载标识
    let isMounted = true
    const handleDisplays = () => {
        // 组件已卸载时直接终止逻辑，不执行状态更新
        if (!isMounted) return
        if (window.scrollY > 0) {
            setNavbar(true)
        } else {
            setNavbar(false)
        }

        if (window.scrollY > 1000) {
            setHelpDisplay(true)
        } else {
            setHelpDisplay(false)
        }

        if (window.scrollY > 1400) {
            setContactDisplay(true)
        } else {
            setContactDisplay(false)
        }
    }

    window.addEventListener('scroll', handleDisplays)
    return () => {
        // 卸载时修改标识，同时移除监听
        isMounted = false
        window.removeEventListener('scroll', handleDisplays)
    }
}, [])

内容的提问来源于stack exchange，提问作者Cihan Özcan