如何使用返回本地存储值的函数在 Nextjs 上的窗口加载事件上初始化状态？

问题描述

现在，我在 NextJs 上初始化变量时遇到错误 window is not defined。我想知道上次在窗口加载时访问该站点的时间。那个时间在本地存储中。

编辑

注意我使用的是函数组件

import { useState } from "react";
import LoadingScreen from "../components/LoadingScreen";
import { AppContext } from "../contexts/AppContext";

function MyApp({ Component,pageProps }) {
const [deltaTime,setDeltaTime] = useState(() => {
    if (typeof window !== undefined) {
      window.onload = () => {
        let lastTimeLoaded =
          localStorage.getItem("@services_site/loadingTime") || null;

        deltaTime = new Date() - 1000 * 20 - new Date(lastTimeLoaded);
        localStorage.setItem("@services_site/loadingTime",new Date());

        console.log("deltaTime is",deltaTime);
        return deltaTime;
      };
    }
    return 0;
  });

  return (
    <>
      {deltaTime < 0 && <LoadingScreen />}
      <AppContext.Provider value={deltaTime}>
        <Component {...pageProps} />
      </AppContext.Provider>
    </>
  );
}

解决方法

所以我把代码移到了 useEffect

    if (typeof window !== undefined) {
      window.onload = () => {
        let lastTimeLoaded =
          localStorage.getItem("@services_site/loadingTime") || null;
        
        let delta = new Date() - 1000 * 20 - new Date(lastTimeLoaded);
        console.log("deltaTime is",delta);

        localStorage.setItem("@services_site/loadingTime",new Date());

        setDeltaTime(delta);
      };
    }
  },[deltaTime]);```