React Context API对象部分值未保留问题求助

问题根源 #

你的代码存在两个核心问题：

1. React状态更新的异步批量特性导致覆盖
   在同一组件的同一执行周期内连续调用setMyContextApiObj时，每一次更新都是基于调用瞬间的myContextApiObj快照（即初始状态），而非前一次更新后的最新状态。这意味着三次更新实际都是在初始状态基础上单独修改，最后执行的那次更新会直接覆盖前两次的结果。

2. 对象展开写法可能不符合预期
   你当前的写法是把tmpObj作为一个单独属性添加到Context对象中（等价于tmpObj: tmpObj），如果其他组件直接尝试访问context.user1而非context.tmpObj.user1，自然获取不到对应的值。

解决方法 #

1. 用函数式更新避免状态覆盖

将每次状态更新改为函数式写法，确保每次更新都基于上一次的最新状态，让三次修改能依次叠加：

let tmpObj = {
    user1: props.user1,
    user2: props.user2
}

// 第2次调用
setMyContextApiObj(prev => ({
    ...prev,
    // 若想将user1、user2直接作为Context属性，用...tmpObj；若要保留tmpObj属性，直接写tmpObj
    ...tmpObj
}));

// 第3次调用
setMyContextApiObj(prev => ({
  ...prev,
  myValFromStorage: myValFromStorage
}));   

// 第1次调用
setMyContextApiObj(prev => ({
    ...prev,
    myPref: myPref
})); 

这里的prev参数是上一次更新后的Context对象，能保证每一次修改都基于最新状态。

2. 修正对象展开的写法

• 若想让user1和user2成为Context的直接属性，使用...tmpObj展开；
• 若确实需要保留tmpObj这个属性，写法不变，但其他组件需通过context.tmpObj.user1来访问值。

验证建议 #

可以在设置状态后打印myContextApiObj，或在组件渲染时输出Context的结构，确认tmpObj（或user1/user2）是否存在，以此验证修改是否生效。

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