接下来的js中没有定义localStorage

Question

我使用 next.js 作为前端。我想从 localStorage 获取用户，但由于 next.js 是服务器端渲染，我无法获取 localStorage。我应该怎么做才能获得 localStorage？

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import authService from "./authService";

const getUserfromLocalStorage = localStorage.getItem("user")
  ? JSON.parse(localStorage.getItem("user"))
  : null;

const initialState = {
  user: getUserfromLocalStorage,
  isError: false,
  isLoading: false,
  isSuccess: false,
  message: "",
};

export const login = createAsyncThunk('auth/login', async (user, thunkAPI) => {
  try {
    return await authService.login(user);
  } catch (error) {
    return thunkAPI.rejectWithValue(error);
  }
});

export const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(login.pending, (state) => {
        state.isLoading = true;
      })
      .addCase(login.fulfilled, (state, action) => {
        state.isLoading = true;
        state.isSuccess = false;
        state.user = action.payload;
      })
      .addCase(login.rejected, (state, action) => {
        state.isLoading = false;
        state.isError = true;
        state.isSuccess = false;
        state.user = null;
      });
  },
});

export default authSlice.reducer;

Answer 1

那是因为您正在尝试访问客户端变量 - window.localStorage在窗口不存在的服务器上。

const getUserfromLocalStorage = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : null;

这里你应该首先检查窗口是否被定义。

if (typeof window !== 'undefined') {
  const getUserfromLocalStorage = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : null;
}

或者您可以检查窗口是否是使用可选链接定义的

const getUserfromLocalStorage = window?.localStorage?.getItem("user") ? JSON.parse(localStorage.getItem("user")) : null;

这里更多类似“React”的解决方案是使用像useEffect这样的钩子来执行此操作。

import { useEffect } from "react";

useEffect(() => {
  const getUserfromLocalStorage = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : null;
}, []);