状态值在 UseEffect 钩子内停止更新 - Gatsby/React

Question

状态值showMenu未在useEffect挂钩内更新。

测试时，当第一次点击按钮并触摸屏幕移动时， showMenu正确控制台为true 。 当第二次（以及第三次、第四showMenu ）点击按钮并触摸屏幕移动时， showMenu继续控制台为true时它应该交替为false 。

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

我不知道您的意图是什么，但是您对useEffect所做的事情可能不是您所期望的。 当showMenu为false ，您将删除尚未绑定的listener函数，因为对象在 JS 中通过引用进行比较，并且每次showMenu更改时都会重新定义listener器。

当useEffect更改时解除绑定侦听器的典型方法是返回一个处理useEffect回调中的清理的函数。 像这样：

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

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

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

Answer 2

我认为 body 的事件没有正确删除，因为每次useEffect都会更改侦听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]);

您还可以阅读清理效果以了解更多信息