解决 ReferenceError: localStorage is not defined in Next.js答案

【问题标题】：Solve ReferenceError: localStorage is not defined in Next.js解决 ReferenceError: localStorage is not defined in Next.js
【发布时间】：2022-09-27 15:40:38
【问题描述】：

我构建了一个 React，现在我正在尝试从 React Router dom 迁移到 Next.js。我进行了重大更改并重构了代码； (pages/routes 和 store.js) 但后来我收到了这个错误“ReferenceError: localStorage is not defined”。

  19 | const initialState = {
> 20 | access: localStorage.getItem(\'access\'),
     |        ^
  21 | refresh: localStorage.getItem(\'refresh\'),
  22 | isAuthenticated: null,
  23 | user: null

你能帮我解决这个问题吗？

减速器/auth.js：

import {
    LOGIN_SUCCESS,
    LOGIN_FAIL,
    SIGNUP_SUCCESS,
    SIGNUP_FAIL,
    ACTIVATION_SUCCESS,
    ACTIVATION_FAIL,
    USER_LOADED_SUCCESS,
    USER_LOADED_FAIL,
    AUTHENTICATED_SUCCESS,
    AUTHENTICATED_FAIL,
    PASSWORD_RESET_SUCCESS,
    PASSWORD_RESET_FAIL,
    PASSWORD_RESET_CONFIRM_SUCCESS,
    PASSWORD_RESET_CONFIRM_FAIL,
    LOGOUT
} from \'../actions/types\';

const initialState = {
    access: localStorage.getItem(\'access\'),
    refresh: localStorage.getItem(\'refresh\'),
    isAuthenticated: null,
    user: null
};

export default function (state = initialState, action) {
    const { type, payload } = action;

    switch(type) {
        case AUTHENTICATED_SUCCESS:
            return {
                ...state,
                isAuthenticated: true
            }
        case LOGIN_SUCCESS:
            localStorage.setItem(\'access\', payload.access);
            localStorage.setItem(\'refresh\', payload.refresh);
            return {
                ...state,
                isAuthenticated: true,
                access: payload.access,
                refresh: payload.refresh
            }
        case USER_LOADED_SUCCESS:
            return {
                ...state,
                user: payload
            }
        case SIGNUP_SUCCESS:
            return {
                ...state,
                isAuthenticated: false
            }
        case AUTHENTICATED_FAIL:
            return {
                ...state,
                isAuthenticated: false
            }
        case USER_LOADED_FAIL:
            return {
                ...state,
                user: null
            }
        case LOGIN_FAIL:
        case SIGNUP_FAIL:
        case LOGOUT:
            localStorage.removeItem(\'access\');
            localStorage.removeItem(\'refresh\');
            return {
                ...state,
                access: null,
                refresh: null,
                isAuthenticated: false,
                user: null
            }
        case PASSWORD_RESET_SUCCESS:
        case PASSWORD_RESET_FAIL:
        case ACTIVATION_SUCCESS:
        case ACTIVATION_FAIL:
        case PASSWORD_RESET_CONFIRM_SUCCESS:
        case PASSWORD_RESET_CONFIRM_FAIL:
            return {
                ...state
            }

        default:
            return state
    }
};

先感谢您

标签： reactjs next.js local-storage

【解决方案1】：

NextJs 使用服务器端渲染，窗口对象没有在那里定义。要做的事情是检查窗口对象的存在，或者最好只在定义它的地方使用它，例如在 useEffect 钩子中，执行客户端的钩子。

您可以执行以下操作：

const initialState = {
    access: typeof window !== undefined ? window.localStorage.getItem('access') : false,
    refresh: typeof window !== undefined ?  window.localStorage.getItem('refresh') : false,
    isAuthenticated: null,
    user: null
};

【讨论】：

嗨，让，谢谢你的回答。现在我收到“ReferenceError：未定义窗口”
@Moammer 这是向前迈出的一步！开个玩笑，我编辑了答案，请告诉我它是否仍然未定义
仍然显示相同的消息； "ReferenceError: 未定义窗口" ___________________________ 19 |常量初始状态 = { > 20 |访问：类型窗口！=未定义？ window.localStorage.getItem('access') ：假，| ^ 21 |刷新：类型窗口！=未定义？ window.localStorage.getItem('refresh') : false, 22 | isAuthenticated: null, 23 |用户：空
好的，我再次使用强类型检查进行编辑，例如“！==”而不是“！=”。它现在应该可以工作，如果没有，不知道如何调试