React Context Consumer未响应式更新或重渲染问题排查

问题根因 #

你在两处独立声明了TeaSettingsProvider，这两个Provider是完全隔离的上下文实例，各自维护独立的state和dispatch，所以不同Provider下的组件状态不会同步：

• 第一个Provider挂载在Home.tsx，仅对StrengthSlider组件生效，你在这个组件里触发的dispatch只会更新当前Provider下的state
• 第二个Provider挂载在TeaPage.tsx，仅对TeaCard组件生效，和第一个Provider的状态完全无关，自然收不到状态更新通知

修复方案 #

把TeaSettingsProvider提升到所有需要共享状态的组件的公共父节点上，不要重复实例化Provider。比如如果Home和TeaPage都是App下的路由子组件，就把Provider包在App根节点：

// App.tsx 示例
function App() {
  return (
    <TeaSettingsProvider>
      {/* 所有需要共享上下文的路由、子组件都放在这里，包括Home、TeaPage */}
      <Home />
      <TeaPage />
    </TeaSettingsProvider>
  )
}

之后分别删掉Home.tsx和TeaPage.tsx里的TeaSettingsProvider包裹即可，这样所有子组件用的都是同一个上下文实例，状态变更会同步到所有消费组件。

可选优化 #

你当前的useTeaSettingsContext在未匹配到Provider时会返回undefined，调用时可能出现解构报错，建议改为抛出错误更易排查问题：

export const useTeaSettingsContext = (): TeaSettingsContext => {
  const context = useContext(TeaSettingsContext);
  if (context === undefined) {
    throw new Error('useTeaSettingsContext 必须在 TeaSettingsProvider 内部使用');
  }
  return context;
};

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