React中axios请求后更新Context状态仅第二次点击生效是什么原因？

• React状态更新的异步与闭包特性：React 中包括 Context 导出的setAuth、setUser在内的所有状态更新方法都是异步入队执行的，调用后不会立刻修改当前作用域下的状态变量。你在更新方法执行后立刻打印console.log(auth, user)，拿到的是本次渲染闭包中缓存的旧值，并不代表状态没有更新。实际上第一次点击提交后状态更新任务已经入队，事件循环结束后组件就会触发重渲染，重渲染后即可拿到Context的最新值。你第二次点击时函数读取到的是第一次更新后的状态，因此会产生「需要点击两次才生效」的错觉。
• 若排除日志误导后确实需要两次点击才生效，可排查以下配置问题：
  • Context Provider 放置层级错误：如果UserContext.Provider和AuthContext.Provider放在了提交组件的内部，状态更新触发组件重渲染时会导致Provider被销毁重建，之前更新的状态会被重置为默认值。需要将两个Provider放在组件树的上层公共节点，避免随提交组件重渲染重新挂载。
  • 存在重复嵌套的Provider实例：如果代码中嵌套了多份相同Context的Provider，内层Provider会覆盖外层的状态，若你更新的是外层Provider的状态，但组件实际消费的是内层Provider的默认值，也会出现状态更新不生效的问题。

验证方法：在当前组件的顶层作用域打印auth和user，第一次点击提交后观察控制台输出，即可看到重渲染后已经拿到了最新的Context值，无需点击第二次。

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