无法对未挂载的组件执行 React 状态更新(useEffect react 钩子)

Question

我正在使用以下代码(useEffect(更改滚动类。

import { useState, useEffect } from "react"
export const useScrollHandler = () => {
// setting initial value to true
const [scroll, setScroll] = useState(1)
// running on mount
useEffect(() => {
const onScroll = () => {
const scrollCheck = window.scrollY < 10
if (scrollCheck !== scroll) {
setScroll(scrollCheck)
}
}
// setting the event handler from web API
document.addEventListener("scroll", onScroll)
// cleaning up from the web API
return () => {
document.removeEventListener("scroll", onScroll)
}
}, [scroll, setScroll])
return scroll
}

即使我使用了清理功能，当我做历史记录时，它也会出现以下错误。push("/"(

警告：无法对未安装的组件执行React状态更新。这是一个非操作，但它表明应用程序中存在内存泄漏。若要修复此问题，请取消useEffect清理函数中的所有订阅和异步任务。

如何解决？

这里我使用了useScrollHandler。

function HomeNav() {
const scroll = useScrollHandler()
return (
<React.Fragment>
<nav
className={
scroll ? "navbar navbar-expand-lg navbar-light fixed-top py-3" : "navbar navbar-expand-lg navbar-light fixed-top py-3 navbar-scrolled"
}
id="mainNav"
>
</nav>
</React.Fragment>
)
}
export default HomeNav

Answer 1

尝试删除unmount上的EventListener。

const onScroll = () => {
const scrollCheck = window.scrollY < 10
if (scrollCheck !== scroll) {
setScroll(scrollCheck)
}
}
useEffect(() => {
// Add event listener on component mount
document.addEventListener("scroll", onScroll)
// removing event listener on component unmount
return () => {
document.removeEventListener("scroll", onScroll)
}
}, []) // This useEffect will act as componentDidMount and return function as componentWillUnmount as no dependencies are given.

Answer 2

我认为在事件处理程序中不需要scroll，并且setScroll是有保证的为常量，这意味着您的效果处理程序可以使用[]作为其依赖数组。简化可能会有所帮助。

import { useState, useEffect } from "react"
export const useScrollHandler = () => {
// setting initial value to true
const [scroll, setScroll] = useState(true);
// running on mount
useEffect(() => {
const onScroll = () => setScroll(window.scrollY < 10)
// setting the event handler from web API
document.addEventListener("scroll", onScroll)
// cleaning up from the web API
return () => {
document.removeEventListener("scroll", onScroll)
}
}, [])
return scroll
}