I have an interesting problem here I will try to outline here. I have a state object in React state that is updated in two separate async functions in this way:
const [someState, setSomeState] = useState({})
const somefunction1 = async () => {
const res1 = ///some api call
setSomeState({...someState, res1: res1})
}
const somefunction2 = async () => {
const res2 = ///some api call
setSomeState({...someState, res2: res2})
}
await someFunction1();
await someFunction2();
console.log(someState); //{res2: res2}
Based on the above example, I am not sure why res1 is missing in this state object when they are called separately, the second call effectively overwrites the changes made from the first call. What I really need this to look like when its done is:
console.log(someState); //{res1: res1, res2: res2}
Is there a better way to write this scenario so I get the expected outcome? Since one somefunction2 is supposed to wait until somefunction1 is complete, I am not sure why it is overwriting it. Any help will be appreciated. Thank you.