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

Posted 2023-02-22

【中文标题】如何使用在 Nextjs 上的窗口加载事件上返回本地存储值的函数初始化状态？ [复制]

【英文标题】：How to initialize state with a function returning localstored value on window's load event on Nextjs? [duplicate]

【发布时间】：2021-05-22 19:07:57

【问题描述】：

现在，我在初始化 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>
    </>
  );

【问题讨论】：

将 fetch 移至 useEffect()。 Nextjs不会运行useEffect()服务端，所以window会存在。

@pilchard 是的，我移动了它并且它有效。非常感谢。现在我有一个意外的行为，当我将 deltaTime 传递给页面组件时，他的值为 0，而不是在窗口加载时创建。

你在useEffect中打电话给setDeltaTime()吗？

是的，我在 useEffect 上做到了

页面加载时，显示正确的值。该行为发生在子组件上，即 index.js 所在的位置，而不是 _app.js 上。我在 index.js 页面上使用 useEffect 但不起作用。

【参考方案1】：

所以我把代码移到了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]);```

【讨论】：

您需要删除窗口检查和window.onload，因为它不会像您预期的那样触发。直接把你本地的存储逻辑放到useEffect里面就好了。

在 _app.js useEffect(() => window.onload = () => let lastTimeLoaded = localStorage.getItem("@romualdo_ah_services/loadingTime") || null; let delta = new Date() - 1000 * 20 - new Date(lastTimeLoaded); console.log("deltaTime is", delta); localStorage.setItem("@romualdo_ah_services/loadingTime", new Date()); setDeltaTime(delta); ; , [deltaTime]);