Next.js 13.8中Context Hook无法更新React状态的问题求助

核心问题 #

你在getSetUser函数中直接将从localStorage/cookie读取的JSON字符串传入setUser，但之前initiateUser中设置的user状态是JavaScript对象。字符串类型的用户数据无法被正确识别为有效用户对象，导致状态看似未更新。

修复步骤 #

1. 解析JSON字符串为对象

修改getSetUser中读取缓存用户数据的逻辑，将字符串解析回对象：

const getSetUser = async (jwt) => {
  const extUsr = Cookies.get("user") || localStorage.getItem("user");
  if (extUsr) {
    console.log(extUsr);
    // 关键修复：将JSON字符串解析为对象
    setUser(JSON.parse(extUsr));
  } else {
    const req = await fetch(
      host + "/api/users/me?populate=*&populate=profile.image",
      {
        method: "GET",
        mode: "cors",
        headers: {
          "Content-Type": "application/json",
          "Access-Control-Allow-Headers":
            "Accept, Authorization, Content-Type",
          Accept: "*/*",
          Authorization: `Bearer ${jwt}`,
        },
      }
    );
    const response = await req.json();
    setUser(response);
  }
};

2. 页面加载时自动恢复用户状态

添加useEffect钩子，在组件挂载时自动调用getSetUser，确保页面刷新后用户状态能从缓存中恢复：

import React, { useState, useContext, useEffect } from "react"; // 新增useEffect导入

export const AuthState = (props) => {
  // ... 原有代码

  useEffect(() => {
    // 从缓存读取JWT，触发用户状态恢复
    const jwt = Cookies.get("jwt") || localStorage.getItem("jwt");
    if (jwt) {
      getSetUser(jwt);
    }
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  // ... 原有代码
};

3. 优化存储逻辑（可选）

可以封装统一的缓存读写工具函数，避免重复处理JSON序列化/反序列化：

// 封装缓存操作
const setAuthData = (key, value) => {
  const serializedValue = typeof value === 'string' ? value : JSON.stringify(value);
  Cookies.set(key, serializedValue);
  localStorage.setItem(key, serializedValue);
};

const getAuthData = (key) => {
  const value = Cookies.get(key) || localStorage.getItem(key);
  try {
    return value ? JSON.parse(value) : null;
  } catch (e) {
    // 解析失败时返回原始值或null
    return value || null;
  }
};

// 使用封装后的函数替换原有逻辑
const initiateUser = async (credentials) => {
  // ... 原有代码
  if (response.jwt) {
    setUser(response.user);
    setAuthData("jwt", response.jwt);
    setAuthData("user", response.user);
  }
  // ... 原有代码
};

const getSetUser = async (jwt) => {
  const extUsr = getAuthData("user");
  if (extUsr) {
    setUser(extUsr);
  } else {
    // ... 原有请求逻辑
  }
};

验证要点 #

• 调用initiateUser后，检查localStorage和cookie中的user值是否为JSON字符串
• 页面刷新后，查看user状态是否为解析后的JavaScript对象
• 确保组件挂载时useEffect能正确触发getSetUser

内容的提问来源于stack exchange，提问作者Abindent