reactJS中的window.removeEventListener不起作用

Question

为什么当我点击按钮关闭粘性元素时，它在滚动时再次变得粘性，好像我没有删除滚动条eventListener?

export default function MyComponent(props) {
const [sticky, setSticky] = useState(false)
const [hidden, setHidden] = useState(false)
const handler = () => {
setSticky(window.scrollY > 700)
}
const closeSticky = () => {
setHidden(true)
window.removeEventListener("scroll", handler, false)
setSticky(false)
}
useEffect(() => {
if (hidden === false){
window.addEventListener("scroll", handler, false)
}
}, [])
return (
...
<button onClick={() => {closeSticky()}} />
<div className={styles.myDiv} style={sticky ? {display: 'block'} : {display: 'none'}}>
etc...

沙盒链接:https://codesandbox.io/s/practical-fire-xk061?file=/src/App.js

Answer 1

我处理了你的代码，能够为你解决这个问题。

另外，你的代码有点乱，我清理了一下根据我个人的品味

import "./styles.css";
import React, { useState, useEffect } from "react";
export default function App() {
const [sticky, setSticky] = useState(true);
const [hidden, setHidden] = useState(false);
const handler = () => setSticky(hidden ? false > 700 : window.scrollY);
const closeSticky = () => setSticky(false);
useEffect(() => {
if (sticky) {
window.addEventListener("scroll", handler, false);
setHidden(false);
} else {
window.removeEventListener("scroll", handler, false);
setHidden(true);
}
}, [sticky]);
return (<>
<button onClick={() => closeSticky()}>&times;</button>
<div className="myDiv" />
{!hidden && window.scrollY > 700 ? <div className="myStickyDiv" /> : null}
</>);
}