Window 在 Nextjs 中未定義，但在 useState 中需要值

Question

隨着屏幕尺寸的變化，試圖獲得准確的 window 值。 如何將 window 值放入 useState()？ 由於 useState 不能在條件中使用，並且 window 在 useEffect 之外未定義？

    const isSSR = typeof window !== "undefined";
    const [windowSize, setWindowSize] = React.useState({
        width: isSSR ? 1200 : window.innerWidth,
        height: isSSR ? 800 : window.innerHeight,
    });

    function changeWindowSize() {
        setWindowSize({ width: window.innerWidth, height: window.innerHeight });
    }

    React.useEffect(() => {
        window.addEventListener("resize", changeWindowSize);

        return () => {
            window.removeEventListener("resize", changeWindowSize);
        };
    }, []);

    return windowSize;
}

Answer 1

有兩點需要糾正

1. 您的isSSR邏輯不正確。 因此，在服務器中評估了window.innerWidth和window.innerHeight 。 它應該是===而不是!== 。

const isSSR = typeof window === "undefined";

2. 並將客戶端 function 更改為安全，如下所示。

function changeWindowSize() {
    if(!isSSR){
        setWindowSize({ width: window.innerWidth, height: window.innerHeight });
    }
}

*** changeWindowSize更改，因為您僅在useEffect中調用它，並且useEffect掛鈎不會在服務器中執行。