React Context更新后组件未重新渲染的问题求助

核心问题 #

你遇到的问题根源有两个：

1. 直接修改原状态对象：React的useState通过浅比较判断状态是否变化，你在setContext里直接修改了prevState的属性，然后返回同一个对象引用，React会认为状态没有更新，因此不会触发组件重新渲染，Provider的value也不会变化，ComponentA自然无法感知到更新。
2. 无限渲染循环：ComponentB每次渲染都会调用setContext，这会触发App组件重新渲染，进而又导致ComponentB渲染，形成循环。

修复方案 #

1. 状态更新时返回新对象 #

修改setContext的逻辑，不要直接修改原对象，而是通过展开运算符创建新对象，确保引用变化：

analyseContext.setContext((prevState) => {
  // 返回新对象，而不是修改原对象
  return { ...prevState, greeting: "updated greeting" };
});

2. 避免组件渲染时重复触发状态更新 #

把状态更新逻辑放到useEffect中，只在组件挂载时执行一次（或者根据需要设置依赖）：

import { useState, useContext, createContext, useEffect } from "react";

// ... 其他代码不变

function ComponentB() {
  console.log("rendering ComponentB");
  const analyseContext = useContext(AnalyseCtx);

  useEffect(() => {
    analyseContext.setContext((prevState) => {
      return { ...prevState, greeting: "updated greeting" };
    });
  }, [analyseContext.setContext]); // 依赖setContext，确保只执行必要的更新

  return <h4>I update context value</h4>;
}

完整修复后的代码 #

import { useState, useContext, createContext, useEffect } from "react";

export const AnalyseCtx = createContext({ greeting: "hello" });

export default function App() {
  const [context, setContext] = useState({ greeting: "hello" });

  console.log("rendering App");

  return (
    <div className="App">
      <AnalyseCtx.Provider value={{ context, setContext }}>
        <ComponentA />
        <ComponentB />
      </AnalyseCtx.Provider>
    </div>
  );
}

function ComponentA() {
  const analyseContext = useContext(AnalyseCtx);
  console.log("rendering ComponentA");
  return (
    <h4>I display the context value: {analyseContext.context.greeting}</h4>
  );
}

function ComponentB() {
  console.log("rendering ComponentB");
  const analyseContext = useContext(AnalyseCtx);

  useEffect(() => {
    analyseContext.setContext((prevState) => {
      return { ...prevState, greeting: "updated greeting" };
    });
  }, [analyseContext.setContext]);

  return <h4>I update context value</h4>;
}

验证效果 #

修复后，App组件会因为状态引用变化重新渲染，Provider的value更新，ComponentA会感知到Context变化并重新渲染，显示更新后的greeting值，同时也避免了无限循环的问题。

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