React使用useState存对象配合useContext修改后页面不更新如何解决

这既不是useContext的特性也不是useState的限制，是你更新状态的方式不符合React的状态更新规则导致的。

React的useState在判断是否需要触发重渲染时，会对前后两次的状态值做浅比较：

• 如果是基础类型（布尔、字符串、数字等），会直接对比值是否变化
• 如果是引用类型（对象、数组等），只会对比内存引用地址是否变化，不会深度对比对象内部的属性是否变更

你在Login组件的log函数里更新状态的写法有问题：

// 错误写法
setuser(a=> {a.logged = true; return a})

这里你直接修改了原状态对象a的logged属性，最终返回的还是原来的对象引用，React对比发现前后状态的引用地址没有变化，就判定状态没有更新，因此不会触发组件重渲染，页面自然不会切换。

你之前控制台看到对象值已经变更，是因为控制台打印的是对象的引用，你修改了原对象的属性后，控制台读取的是对象最新的属性值，并不是React已经完成了状态更新。

修复方案 #

只需要修改状态更新逻辑，返回一个全新的对象即可，可以用扩展运算符拷贝原有对象的所有属性，再覆盖需要修改的属性：

// 修正后的Login组件log函数
function log(){
  console.log(user)
  setuser(a=> ({...a, logged: true}))
}

修改后返回的是全新的对象引用，React可以检测到状态变更，就会触发重渲染，页面就会正常切换。

内容的提问来源于stack exchange，提问作者José Luis Zarabanda Díaz