javascript - 状态值停止在 UseEffect Hook 内更新 - Gatsby/React

Question

状态值 showMenu 未在 useEffect Hook 内更新。

测试时，当第一次单击按钮并触摸屏幕移动时，showMenu 正确地控制台为 true。当第二次单击按钮(第三次、第四次等)并且触摸屏幕进行移动时，showMenu 继续将控制台设置为 true，而此时它应该交替为 假。

const [showMenu, setShowMenu] = useState(false)

useEffect(_ => {
    const listener = e => {
        e.preventDefault()
        console.log(showMenu, ' useEffect - touchmove')
    }

    showMenu
        ? document.body.addEventListener('touchmove', listener, {passive: false})
        : document.body.removeEventListener('touchmove', listener)
}, [showMenu])

return (
    <button onclick={_ => {
        console.log(!showMenu, ' button click')
        setShowMenu(!showMenu)
    }} />
)

控制台结果

Answer 1

我认为 body 事件没有正确删除，因为每次 useEffect 都会更改监听器。

所以可以在useEffect中返回一个函数来清除之前的useEffect。

useEffect(() => {
    if (showMenu) {
        const listener = e => {
            e.preventDefault();
            console.log(showMenu, ' useEffect - touchmove');
        };

        document.body.addEventListener('touchmove', listener, { passive: false });

        return () => {
            document.body.removeEventListener('touchmove', listener);
        }
    }
}, [showMenu]);

您还可以阅读cleaning-up-an-effect了解更多