React App组件未更新Context但子、孙组件均正常更新问题排查

问题原因 #

你遇到的现象是嵌套Context Provider的就近生效规则导致的，核心原因是你在<Child>组件内部额外声明了一层<ConvoContext.Provider>，而非全局仅使用根节点包裹App的那一个Provider：

• React Context 遵循就近取值规则：组件会读取距离自己最近的上层匹配Provider提供的value，无匹配Provider时才会读取createContext传入的默认值。
• 根层Provider给App传递的value是字符串IN CONTEXT: this works for direct children of the provider，因此App组件读取到的Context就是该字符串。
• Child组件内部嵌套的Provider传入的value是包含convo字段和speak方法的对象，且这层Provider包裹了Child的子元素，因此Child本身和后代Grandchild读取到的都是这层Provider的对象值，和根层Provider的值完全独立。
• Context遵循React自上而下的数据流规则：只有当前Provider包裹的后代组件会响应该Provider的value更新，上层组件不受影响。因此你在Child层Provider更新value时，只有Child和Grandchild会重渲染；在Grandchild中更新Child层Provider的value时，也只会影响该Provider的后代，不会向上触发App和Child的更新。

修复方案 #

如果需要全局共享同一套Context，所有组件读写一致的状态，按以下步骤调整即可：

1. 删除Child组件内部的<ConvoContext.Provider>声明，所有组件统一消费根层包裹App的Provider提供的value。
2. 将Context状态和更新方法（如speak函数）提到根层Provider的value中，示例代码如下：

// 根层声明全局Context状态
const [convo, setConvo] = useState("IN CONTEXT: this works for direct children of the provider");
const speak = (newConvo) => setConvo(newConvo);

return (
  <ConvoContext.Provider value={{convo, speak}}>
    <App />
  </ConvoContext.Provider>
)

调整后所有组件读取到的Context都是包含convo和speak的对象，任意组件调用speak更新状态，所有消费该Context的组件都会同步触发更新、拿到最新值。

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