React Context更新后页面未重渲染问题求助

我创建了用于存储当前登录用户等基础数据的Base Context，对应的User页面本该展示用户信息，但Context更新时页面并未重渲染。初始状态下Context未加载（isLoaded = false），当从API获取用户的初始化操作完成后，isLoaded与base.loaded均被设为true，Context已更新，但User页面仍持续显示“Loading...”，且页面已正确包裹在Context中。

问题原因 #

React的组件重渲染仅会响应通过useState/useReducer等钩子管理的状态变化。你当前的实现中，Base是普通JavaScript类实例，直接修改它的loaded属性（this.loaded = true）属于普通对象的属性变更，不会被React的状态检测机制感知到。User组件中获取的base是静态对象，其属性变化无法触发组件重渲染。

解决方案 #

方法1：用React状态管理Base实例 #

修改BaseProvider，通过useState保存Base实例，初始化完成后更新状态，让React感知到变化并触发重渲染：

"use client"

import { createContext, useContext, ReactNode, useState, useEffect } from 'react';
import Base from '@/scripts/classes/Base.class';

const BaseContext = createContext<Base | undefined>(undefined);

export const BaseProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [base, setBase] = useState<Base | null>(null);
  const [isLoaded, setLoaded] = useState(false);

  useEffect(() => {
    const initBase = async () => {
      try {
        const newBase = new Base("123");
        await newBase.init();
        console.log("Initialized base");
        setBase(newBase); // 更新React状态，触发重渲染
        setLoaded(true);
      } catch (err) {
        console.log("ERROR ON INITIALIZATION", err);
      }
    };
    initBase();
  }, []);

  if (!isLoaded || !base) return "Loading Base...";

  return <BaseContext.Provider value={base}>{children}</BaseContext.Provider>;
};

export const useBase = () => {
  const context = useContext(BaseContext);
  if (!context) {
    throw new Error("useBase must be used within a BaseProvider");
  }
  return context;
};

方法2：简化User页面的判断逻辑 #

由于BaseProvider已经确保在base初始化完成后才渲染子组件，User页面无需再判断base.loaded，直接使用数据即可：

"use client"

export default function UserProfile({ params }: Props) {
    const base = useBase();
    // Provider已保证base完成初始化，无需额外判断
    return "Loaded " + base.users.me.username;
}

核心逻辑说明 #

通过useState保存Base实例后，调用setBase(newBase)会触发React的状态更新流程，Provider会重新渲染并将更新后的base传递给子组件，User页面因此会获取到最新的base实例并渲染用户信息。

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