React Context API 未保留对象值之一

Question

我正在尝试在如下功能组件之一中设置我的 Context API 对象，如下所示；

我在同一个组件中设置了3次，如下所示；

    let tmpObj = {
        user1: props.user1,
        user2: props.user2
    }
// Called 2nd. Below is NOT retained
    setMyContextApiObj({
        ...myContextApiObj,
        tmpObj
    });
    
//Called 3rd. This one is retained    
    setMyContextApiObj({
      ...myContextApiObj,
      myValFromStorage: myValFromStorage
    });   
    
//Called 1st. This one is retained    
    setMyContextApiObj({
        ...myContextApiObj,
        myPref: myPref
    }); 

    

但是，由于某种原因，我只有在离开该组件后才能获取 myValFromStorage 和 myPref 值，而不是 tmpObj 值。 不知道为什么该值没有保留在 Context API 中

Answer 1

您有两种选择来解决此问题：

1-通过一次调用 setMyContextApiObj 函数对上下文值进行所有所需的更改。这涉及将所有更改汇总到一个函数调用中：

 setMyContextApiObj({
        ...myContextApiObj,
        tmpObj, 
        myValFromStorage: myValFromStorage,
        myPref: myPref
    });

2 - 不要将对象显式传递给 setMyContextApiObj 函数的输入，而是向其传递一个返回新上下文状态值的函数。这样，React 将理解所有新值之间存在依赖关系，并将在设置前一个调用和前一个上下文值之后按顺序执行所有调用：

        setMyContextApiObj((c) => {
            return {
                ...c, 
                tmpObj
           }
        })
        setMyContextApiObj((c) => {
            return {
                ...c, 
                myValFromStorage: myValFromStorag
            }
        })
        setMyContextApiObj((c) => {
            return {
                ...c, 
                myPref: myPref
            }
        })

这是一个解释其工作原理的示例： 代码沙箱