Question

如何使用 React Hooks 安装组件？

2021-08-27

24

reactjs

const handleDisplays = () => {
        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)
        }

    }

    useEffect(() => {
        window.addEventListener('scroll', handleDisplays)
    }, [])

我有这种方法可以在网站主页滚动时设置动画。它工作正常，但当我转到任何其他组件并滚动页面时，它会抛出此错误：

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

网站没有崩溃，但很烦人。

我尝试在不使用 useEffect 的情况下编写它，也尝试过：

useEffect(() => {
        return  () => {
            window.addEventListener('scroll', handleDisplays)
        } 
}, [])

但我无法处理它。

我该如何摆脱这个错误？

Answer 1

卸载时添加 removeEventListener。

useEffect(() => {
        window.addEventListener('scroll', handleDisplays)
        return  () => {
            window.removeEventListener('scroll', handleDisplays, true)
        } 
}, [])

本博客介绍了如何在 useEffect 中添加或删除事件监听器