Next React - ReferenceError：未定义窗口[重复]答案

【问题标题】：Next React - ReferenceError: window is not defined [duplicate]Next React - ReferenceError：未定义窗口[重复]
【发布时间】：2022-02-01 06:07:59
【问题描述】：

我有两个可重用的函数，我使用window.localStorage.getItem 方法。

const userByToken = () => {
    const dispatch = useDispatch();
    const token = window.localStorage.getItem("token");
    const refreshToken = window.localStorage.getItem("refreshToken");
}

此函数使用window返回错误

但第二个功能

    const useValidateToken = (setLoadingState: any) => {
      const router = useRouter();
      useEffect(() => {
          const token = window.localStorage.getItem("token");
          const refreshToken = window.localStorage.getItem("refreshToken");
      })
    }

不返回错误。

为什么没有useEffect 会出错？

【问题讨论】：

除了链接的分辨率 - 为什么很可能是因为服务器端 NextJS 只执行第一次渲染，所以 useEffects 没有被调用。但是你的第一个 sn-p 没有效果，所以它会在服务器端渲染期间尝试调用它

标签： node.js reactjs react-hooks next.js

【解决方案1】：

接下来首先在服务器中预渲染组件，这里不存在window 对象。

您必须使用useEffect 或添加某种防护以避免在运行第一次渲染时崩溃

  const isBrowser = !!window; // Feel free to define which is the best way to detect when is being runner in the browser
  if (isBrowser) {...}

【讨论】：

感谢您的回复，所以没有useEffect不能使用window
你应该使用typeof window !== 'undefined'检查。调用 !!window 将在服务器端引发 ReferenceError。
你说得对@Aitwar，我的演示很模糊