NextJS：如何讓這個組件在頁面加載時顯示寬度？

運行以下獲取瀏覽器螢屏寬度的代碼時，出現此錯誤：

ReferenceError：未定義視窗

注釋掉的代碼有效，使用 0 作為默認值，但在更改瀏覽器寬度時會正確更新。

我要么得到視窗未定義錯誤，要么將默認數字傳遞給狀態，這在頁面加載時顯示不正確的寬度。

如何在頁面加載時定義 window.innerWidth？

import React, { useState, useEffect } from "react";

const WindowTracker = () => {
    const [show, setShow] = useState(true);
    // const [windowWidth, setWindowWidth] = useState(0);
    const [windowWidth, setWindowWidth] = useState(window.innerWidth);

    const triggerToggle = () => {
        setShow(!show);
    };

    useEffect(() => {
        function watchWidth() {
            setWindowWidth(window.innerWidth);
        }

        window.addEventListener("resize", watchWidth);

        return function () {
            window.removeEventListener("resize", watchWidth);
        };
    }, []);

    return (
        <div>
            <button onClick={triggerToggle}>Toggle WindowTracker</button>
            {show && <h1>Window width: {windowWidth}px</h1>}
        </div>
    );
    // }
};

export default WindowTracker;

謝謝！

uj5u.com熱心網友回復：

使用這個鉤子：

const [windowWidth, setWindowWidth] = useState();

useEffect(() => {
    setWindowWidth(window.innerWidth)
}, [window.innerWidth])

uj5u.com熱心網友回復：

發生這種情況是因為在 nextjs 在視窗服務器上執行的預渲染中它尚未定義，我在我的代碼中通過添加一個 if 解決了這個問題，這是它的外觀示例代碼

import React, { useState, useEffect } from "react";

const WindowTracker = () => {
  const [show, setShow] = useState(true);
  // const [windowWidth, setWindowWidth] = useState(0);
  const [windowWidth, setWindowWidth] = useState(typeof window !== "undefined" ? window.innerWidth : 0);

  const triggerToggle = () => {
    setShow(!show);
  };

  useEffect(() => {
    if (typeof window !== "undefined") {
      function watchWidth() {
        setWindowWidth(window.innerWidth);
      }

      window.addEventListener("resize", watchWidth);

      return function () {
        window.removeEventListener("resize", watchWidth);
      };
    }
  }, []);

  return (
    <div>
      <button onClick={triggerToggle}>Toggle WindowTracker</button>
      {show && <h1>Window width: {windowWidth}px</h1>}
    </div>
  );
  // }
};

export default WindowTracker;

uj5u.com熱心網友回復：

setWindowWidth您應該在組件安裝時觸發

const isClientSide = () => typeof window !== 'undefined';

const getWindowSize = () => {
    if (isClientSide()) return window.innerWidth
    return 0
}

const WindowTracker = () => {
    const [show, setShow] = useState(true);
    const [windowWidth, setWindowWidth] = useState(getWindowSize());

    const triggerToggle = () => {
        setShow(!show);
    };

    useEffect(() => {
        function watchWidth() {
            setWindowWidth(window.innerWidth);
        }

        window.addEventListener("resize", watchWidth);
        setWindowSize(getWindowSize());  <=== This should set the right width
        return function () {
            window.removeEventListener("resize", watchWidth);
        };
    }, []);

    return (
        <div>
            <button onClick={triggerToggle}>Toggle WindowTracker</button>
            {show && <h1>Window width: {windowWidth}px</h1>}
        </div>
    );
};

export default WindowTracker;

uj5u.com熱心網友回復：

在useEffect鉤子內部，您還可以呼叫setWindowWidth(window.innerWidth);at 以使用 window.innerWidth 將狀態設定為在 pageLoad 上具有所需的寬度。

const [windowWidth, setWindowWidth] = useState(0);

useEffect(() => {
        function watchWidth() {
            setWindowWidth(window.innerWidth);
        }

        window.addEventListener("resize", watchWidth);

        //  Call right away so state gets updated with initial window size
        setWindowWidth(window.innerWidth);

        return function () {
            window.removeEventListener("resize", watchWidth);
        };
    }, []);

標籤：javascript 反应 下一个.js

上一篇：我可以在vue組件的<stylescoped>部分中擁有傳單divIcon的className嗎？

下一篇：為什么在自定義鉤子反應之前必須使用“使用”？