反應鈎子 useEffect 更新 window.innerHeight

Question

我想在調整屏幕大小時用內部 window 高度更新 state。 當我在useEffect掛鈎中記錄 state 高度時，我每次都得到 0 ，但是當我在updateWindowDimensions function 中登錄時，高度值會按預期更新。

如何每次使用新值更新 state？

const [height, setHeight] = useState(0);

const updateWindowDimensions = () => {
    const newHeight = window.innerHeight;
    setHeight(newHeight);
    console.log('updating height');   
};

 useEffect(() => {
     window.addEventListener('resize', updateWindowDimensions);
     console.log("give height", height);
 }, []);

Answer 1

您的useEffect僅在組件安裝時運行一次（因為您作為第二個參數傳遞的空數組[] ）

如果您只是在它之外登錄，您將看到您的狀態值正在正確更新

  const [height, setHeight] = useState(0);

  useEffect(() => {
    const updateWindowDimensions = () => {
      const newHeight = window.innerHeight;
      setHeight(newHeight);
      console.log("updating height");
    };

    window.addEventListener("resize", updateWindowDimensions);

    return () => window.removeEventListener("resize", updateWindowDimensions) 

  }, []);

  console.log("give height", height);

此外，您應該將該函數的聲明移動到useEffect中，這樣它就不會在每次渲染時重新聲明

Answer 2

@Galupuf 的上述答案不會理想地工作，直到您在 addEventListener 下面添加 updateWindowDimensions 調用：

window.addEventListener("resize", updateWindowDimensions);
updateWindowDimensions()

因為 eventListener 在你調整大小之前不會運行這個函數。 因此高度將保持為 0，直到您調整大小。

Answer 3

我知道現在回答為時已晚，但我們可以為此目的定義一個鈎子。 在這里你可以找到一個自定義鈎子，它在每次調整大小時更新 window 的寬度和高度。