React Context触发setState后状态未更新问题排查

从你给出的运行日志看，点击按钮触发setState调用后，Provider组件完全没有执行重渲染（没有新的state日志输出），说明Child组件里拿到的setState根本不是Provider内部useState生成的合法状态更新方法，90%以上的概率是以下两类问题：

最高发：Context实例不匹配 #

Provider和Child用的不是同一个Context对象：

• Provider用A Context实例做上下文注入
• Child通过useContext拿到的是B Context实例的默认值
• 如果你给B Context写了默认值{state: '', setState: () => {}}，调用这个空函数式的setState不会触发任何组件更新，也不会抛错，和你现在的表现完全一致。

这类问题通常是写法疏漏导致的：

• 定义Context的文件混用默认导出、命名导出，Provider和Child导入时用了不同的导入方式，或者路径写错，拿到了其他模块的Context
• Provider组件内部私自创建了一个未导出的Context做注入，Child导入的是文件对外导出的另一个独立Context
• 文件名大小写不一致、路径别名配置错误、开发服务器热更新缓存异常，导致同一个Context文件被解析成两个独立模块，生成了两个完全隔离的Context实例。

易忽略：Provider是假嵌套 #

你以为Provider是Child的父组件，实际两者是同级关系：

// 错误写法：Child和Provider平级，不在上下文作用域内
<MyContextProvider></MyContextProvider>
<Child />

// 正确写法：Child作为Provider的子元素嵌套
<MyContextProvider>
  <Child />
</MyContextProvider>

还有一种情况是Provider组件内部加了条件提前返回，也就是你注释的//Other logic requiring state部分存在if(xxx) return <其他内容 />这类逻辑，导致实际渲染时根本没有返回MyContext.Provider节点，Child自然拿不到正确的上下文值。

做个引用校验10秒就能找到问题：

1. 在Provider组件内把useState生成的setState挂到全局：window.providerSetState = setState
2. 在Child的按钮点击事件里加一行日志：console.log('setState匹配校验', setState === window.providerSetState)

• 输出false：就是Context实例不匹配，检查所有Context的导入导出、文件路径，重启开发服务器清除缓存即可修复
• 输出true：检查Provider内部是否有逻辑重写了setState，或者存在拦截状态更新的逻辑。

你当前Provider每次渲染都会新建一个对象作为value传递，虽然不是这次问题的诱因，但会导致所有消费该Context的组件在Provider每次重渲染时都被迫强制重渲染，建议用useMemo缓存value：

const value = useMemo(() => ({ state, setState }), [state]);
return <MyContext.Provider value={value}>{children}</MyContext.Provider>;

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