React Context更新报错：渲染组件时无法更新ContextProvider

结论：必须把setPageId放在useEffect中 #

原因分析 #

你遇到的报错Cannot update a component (MyContextProvider) while rendering a different component，根源是在Page组件的渲染阶段直接调用了状态更新函数。

React的渲染逻辑是：组件渲染时会同步执行内部所有顶层代码，你直接写的setPageId(id)会在Page渲染过程中触发ContextProvider的状态更新——但此时Page本身还没渲染完，React不允许在一个组件渲染期间去更新另一个组件的状态，这会打乱整个渲染流程，所以抛出了这个错误。

而useEffect的本质是处理组件渲染完成后的副作用操作，把setPageId放进useEffect里：

• 会等Page组件完全渲染结束后，再去更新Context的状态
• 彻底避开了渲染阶段的状态更新冲突，完全符合React的运行机制

修正后的Page组件代码 #

const { id } = useParams();
const { pageId, setPageId } = useContext(MyContext);

useEffect(() => {
  // 加个判断，只有id和当前pageId不一致时才更新，避免无意义的重复调用
  if (id !== pageId) {
    setPageId(id);
  }
}, [id, pageId, setPageId]); // 依赖数组保证只有当这些值变化时才执行副作用

额外提醒 #

另外确认一下你的ContextProvider是包裹在路由组件外层的，这样Page组件才能正常获取到Context，这个环节没问题的话，上面的修正就能解决你的报错。

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