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挂钩不会在服务器中执行。