Question

我有一个无状态组件，需要监听键盘事件。它在安装组件时添加keydown侦听器，并在卸载组件时将其删除。状态test是boolean的值。装入组件时将其设置为true。但是在keydown事件侦听器中，其值始终为false。看起来侦听器没有采用状态引用。我的代码有什么问题？

const { useEffect, useState } = React;


const Comp = () => {
  const [test, setTest] = useState(false);
  const keyPressHandler = (e) => {
    setTest(!test);
    console.log(test);
  }
  useEffect(() => {
    setTest(true);
    window.addEventListener('keydown', keyPressHandler);
    return () => {
      window.removeEventListener('keydown', keyPressHandler);
    };
  }, []);

  return (
    <div className="test">
      hello {test + ""}
    </div>
  );
};

Answer 1

您可以在测试更改时重新运行useEffect，这将使侦听器始终具有当前值。

  useEffect(() => {
    setTest(true);
    window.addEventListener('keydown', keyPressHandler);
    return () => {
      window.removeEventListener('keydown', keyPressHandler);
    };
  }, [test]);

，您应该将setTest从useEffect中删除，因为只要您使用true，它将不断将测试更改为setTest()。

如何在窗口事件监听器中访问无状态组件状态？

1 个答案: