我使用 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;
那是因为您正在尝试访问客户端变量 - window 不存在的服务器上的 window.localStorage。
const getUserfromLocalStorage = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : null;
这里首先要检查window是否被定义。
if (typeof window !== 'undefined') {
const getUserfromLocalStorage = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : null;
}
OR您可以检查窗口是否是使用可选链接
定义的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;
}, []);
就我而言,当尝试检查窗口对象时,我仍然得到
ReferenceError: window is not defined
。
if (typeof window !== 'undefined') {
localStorage.setItem('token', token);
}
对我有用的是在全局对象上使用可选链接来访问窗口对象。
if (global?.window !== undefined) {
// Now it's safe to access window and localStorage
localStorage.setItem('token', token);
}