如何在窗口事件監聽器中訪問無狀態組件狀態？

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中刪除，因為無論何時使用setTest()它都會將test更改為true 。