React 上下文没有更新

Question

我已经从嵌套 props 到我的组件切换到 React 的 Context API。我创建了一个 class 来为我提供一些所需的方法：

export default class StepDatabase {
  private readonly steps: Steps = steps;
  private currentStep: number = steps[0].step;

  public getStep(): Step {
    return this.steps[this.currentStep];
  }

  public nextStep(): void {
    if (this.currentStep === this.steps.length) return;
    this.currentStep++;
  }
}

然后，创建了一个上下文：

const stepsInstance = new StepsDatabase();
export const StepsContext = createContext<StepsDatabase>(stepsInstance);

当然，那就提供吧：

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

并尝试在我的 Sidebar 组件中使用它：

const Sidebar = () => {
  const StepContext = React.useContext(StepsContext);
  const currentStep = StepContext.getStep();

  return (
    <section className={`${styles.App_gridItem} ${styles.App_sideItem}`}>
      <SidebarHeading>{currentStep.stepName}</SidebarHeading>
      <SidebarParagraph>{currentStep.stepDescription}</SidebarParagraph>

      <button onClick={() => StepContext.nextStep()}>step</button>
    </section>
  );
};

但是 SidebarHeading 和 SidebarParagraph 在点击我的按钮后根本没有更新。第一步工作正常。有什么问题吗？

Answer 1

您的代码中没有任何内容会触发 re-render 的上下文。如果上下文不 re-render，它将无法触发所有使用它的组件。您需要更高级别的东西来使上下文 re-render，或者您需要将上下文中的函数传递给可能触发 re-render 的消费者。见 documentation.

根据您的代码an example：

import React, { createContext, useState } from "react";
import "./styles.css";

const StepsContext = createContext();

const Sidebar = () => {
  const { step, setNextStep } = React.useContext(StepsContext);

  return (
    <section>
      <div>Heading: {step.stepName}</div>
      <div>Paragraph: {step.stepDescription}</div>

      <button onClick={() => setNextStep()}>step</button>
    </section>
  );
};

export default function App() {
  const [steps, setSteps] = useState([
    { stepName: "Step 1", stepDescription: "My description 1" },
    { stepName: "Step 2", stepDescription: "My description 2" }
  ]);
  const [currentStep, setCurrentStep] = useState(0);

  return (
    <div>
      <main>
        <StepsContext.Provider
          value={{
            step: steps[currentStep],
            setNextStep: function () {
              if (currentStep < steps.length - 1) {
                setCurrentStep(currentStep + 1);
              }
            }
          }}
        >
          <Sidebar />
          <div>Content</div>
        </StepsContext.Provider>
      </main>
    </div>
  );
}

React 上下文没有更新

React Context is not updating

reactjs

react-context