React Context未更新问题：切换到Context API后视图不更新

你的核心问题在于：StepDatabase是一个普通JavaScript类，它内部属性的变化不会触发React的组件重渲染机制。

React组件只有在以下场景才会重新渲染：

• 自身的state发生变化
• 接收的props发生变化
• 消费的Context的value引用发生变化

你当前的实现中，点击按钮修改的是类实例内部的currentStep属性，但Context的value始终是同一个stepsInstance引用——React完全感知不到内部属性的变化，自然不会更新Sidebar组件。

我们需要把状态管理逻辑迁移到React的状态体系中，让状态变化能触发组件重渲染。下面是具体的改造步骤：

1. 替换普通类为React状态管理 #

移除StepDatabase类，转而在Context Provider内部用React的useState来管理步骤状态：

import { createContext, useState, useMemo, ReactNode } from 'react';
// 假设你的Step和Steps类型已经定义
type Step = { step: number; stepName: string; stepDescription: string };
type Steps = Step[];
// 假设你的初始steps数组已经定义
const steps: Steps = [/* 你的步骤数据 */];

// 定义Context的类型
export type StepsContextType = {
  currentStep: Step;
  nextStep: () => void;
};

// 创建Context，提供默认值
export const StepsContext = createContext<StepsContextType>({
  currentStep: steps[0],
  nextStep: () => {},
});

// 自定义Provider组件
export const StepsProvider = ({ children }: { children: ReactNode }) => {
  // 用state管理当前步骤的索引
  const [currentStepIndex, setCurrentStepIndex] = useState(0);

  const nextStep = () => {
    // 修复原代码的边界判断：索引从0开始，最后一步索引是steps.length-1
    if (currentStepIndex < steps.length - 1) {
      setCurrentStepIndex(prev => prev + 1);
    }
  };

  // 用useMemo缓存Context的value，避免不必要的重渲染
  const contextValue = useMemo(() => ({
    currentStep: steps[currentStepIndex],
    nextStep,
  }), [currentStepIndex]); // 依赖currentStepIndex，索引变化时生成新的value引用

  return (
    <StepsContext.Provider value={contextValue}>
      {children}
    </StepsContext.Provider>
  );
};

2. 更新App组件的Provider使用 #

const App = () => (
  <div className={styles.App_container}>
    <main className={styles.App_grid}>
      <StepsProvider>
        <Sidebar />
        <Content />
      </StepsProvider>
    </main>
  </div>
);

3. 简化Sidebar组件的Context消费 #

const Sidebar = () => {
  const { currentStep, nextStep } = React.useContext(StepsContext);
  
  return (
    <section className={`${styles.App_gridItem} ${styles.App_sideItem}`}>
      <SidebarHeading>{currentStep.stepName}</SidebarHeading>
      <SidebarParagraph>{currentStep.stepDescription}</SidebarParagraph>
      <button onClick={nextStep}>Next Step</button>
    </section>
  );
};

当你点击按钮调用nextStep时：

1. 它会更新React的currentStepIndex状态
2. 状态变化触发StepsProvider组件重渲染
3. useMemo会根据新的索引生成新的Context value引用
4. Sidebar组件感知到Context value变化，自动重新渲染，展示最新的步骤信息

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