如何读取事件侦听器内的状态？

Question

我有以下代码：

//...
    const [ scale, setScale ] = useState(0.5);

    const [ altPressed, setAltPressed ] = useState(false);

    const handleScroll = ({ deltaY }) => {
        if (altPressed) {
            const newScale = scale + deltaY;

            setScale(newScale);
        }
    };

    const handleKeyPress = ({ altKey }) => {
        if (altKey) {
            setAltPressed(true);
        }
    };

    const handleKeyRelease = ({ altKey }) => {
        if (!altKey) {
            setAltPressed(false);
        }
    };

    useEffect(() => {
        window.addEventListener("wheel", handleScroll);
        window.addEventListener("keydown", handleKeyPress);
        window.addEventListener("keyup", handleKeyRelease);
    }, []);
//...

但不幸的是handleScroll总是读的初始状态altPressed ，这是假的，即使键盘事件侦听器工作正常，并正确设置状态。

如何解决这个问题，使其始终读取新鲜状态？

Answer 1

一种方法是使您的效果依赖于altPressed ，以便在更改时重新创建事件侦听器。 您必须确保删除从提供给useEffect的函数返回的函数中的事件侦听器，这样就不会出现任何重复的侦听器或内存泄漏。

useEffect(() => {
  window.addEventListener("wheel", handleScroll);
  window.addEventListener("keydown", handleKeyPress);
  window.addEventListener("keyup", handleKeyRelease);

  return () => {
    window.removeEventListener("wheel", handleScroll);
    window.removeEventListener("keydown", handleKeyPress);
    window.removeEventListener("keyup", handleKeyRelease);
  };
}, [altPressed]);