使用React UseEffect中的cleanup函数

Question

在我的应用程序中，用户滚动到某个点后，会弹出一个导航栏。我使用两个单独的导航条，并定义当前滚动位置如下：

const newNavbar = () => {
if (window !== undefined) {
let posHeight_2 = window.scrollY;
posHeight_2 > 112 ? setNewNav(!newNav) : setNewNav(newNav)
}
};
const stickNavbar = () => {
if (window !== undefined) {
let windowHeight = window.scrollY;
windowHeight > 150 ? setSticky({ position: "fixed", top: "0", marginTop:"0", transition: "top 1s"}) : setSticky({});
}
};
const scrollPos = () => {
if (window !== undefined) {
let posHeight = window.scrollY;
posHeight > 112 ? setScroll(posHeight) : setScroll(0)
}
};

当前状态由useState管理并提供给一个类，该类由不断变化的滚动位置触发：

const [scroll, setScroll] = useState(0);
const [newNav, setNewNav] = useState (false)
const [sticky, setSticky] = useState({});
const navClass = newNav ? 'menu-2 show' : 'menu-2'
<Navbar className={navClass}> 
//
</Navbar>

最后UseEffect来利用状态：

React.useEffect(() => {
window.addEventListener('scroll', stickNavbar);
return () => window.removeEventListener('scroll', stickNavbar);
}, []);

React.useEffect(() => {
window.addEventListener('scroll', scrollPos);
return () => window.removeEventListener('scroll', stickNavbar);
}, []);

React.useEffect(() => {
window.addEventListener('scroll', newNavbar);
return () => window.removeEventListener('scroll', newNavbar);
}, []);

然而，我的清理功能不起作用，我收到错误警告：无法对未安装的组件执行React状态更新。

Answer 1

您的第二个useEffect包含复制/粘贴错误
它应该删除scrollPos(因为这是您绑定的(，而不是stickNavbar。

因此，scrollPos侦听器未被删除，这会在下一个scroll事件中导致错误，因为从DOM中删除组件后，绑定函数不再存在。