Nextjs 中未定义窗口，但 useState 中需要值

Question

随着屏幕尺寸的变化，尝试获取准确的窗口值。如何将窗口值放入 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";

1. 并将客户端功能更改为安全，如下所示。

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

*** changeWindowSize 不需要更改，因为您仅在 useEffect 内调用它，并且 useEffect 挂钩不会在服务器中执行。