Question

我在为生产构建应用程序时遇到错误。它一直在说 ReferenceError: window is not defined。我迷失了解决问题

完整代码：

const [windowSize, setWindowSize] = useState<WindowInfo>({
        width: window.innerWidth,
        height: window.innerHeight,
    });

    useEffect(() => {
        if (typeof window !== "undefined") { // error showing in this line
            function handleResize() {
                const data: WindowInfo = {
                    width: window.innerWidth,
                    height: window.innerHeight,
                }

                setWindowSize(data);
            }

            window.addEventListener("resize", handleResize);

            handleResize();

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

谁能告诉我这个问题的解决方法

Answer 1

window 是浏览器唯一的东西。在 NodeJS 服务器上，不会定义 window。

您已经在 useEffect 中处理了此问题，但在 useState 中尚未处理。你需要这样的东西：

const isBrowser = (typeof window !== "undefined");
const [windowSize, setWindowSize] = useState<WindowInfo>({
    width: isBrowser ? window.innerWidth : 0,
    height: isBrowser ? window.innerHeight : 0,
});

我在上面使用了 0 作为默认值，但您可以使用任何适合您的项目的值。

ReferenceError: 窗口未定义 NextJS

1 个答案: