React: SetState of Functional Component from Within a Callback - reactjs

Question

My top level functional component App has a Promise-returning function req() that will be called from many child components. Internally, req() updates App's state to display that it was called (and why), then calls a different promise-returning function. Here is req():
//wrap all requests to track and display their progress
function req(func, args, waitCap, yayCap) {
//perform a callback on a given req, then update state
const withReq = (argId, callback) => {
let newReqs = state.reqList.map ( r => r); //copy the reqList
for (let reqIndex = 0; reqIndex < newReqs.length; reqIndex++) { //iterate through the list
if ((newReqs[reqIndex] && (newReqs[reqIndex].id === argId))) { //find a match
callback(newReqs[reqIndex]); //pass it to the callback
break;
}
}
setState( prevState => ({
...prevState,
reqList:newReqs,
}));
}
//kill a req and update state
const deleteReq = argId => {
let newReqs = state.reqList.filter( r => { //new reqList is the same list with no objects containing the argID
return r.id !== argId;
});
setState( prevState => ({
...prevState,
reqList:newReqs,
}));
}
//duplicate the req list
let newReqs = state.reqList.map( r => r );
const now = new Date(); //create a unique ID for this req for tracking
const reqId = [
now.getFullYear(),
String(now.getMonth()+1).padStart(2,"0"),
String(now.getDate()).padStart(2,"0"),
String(now.getHours()).padStart(2,"0"),
String(now.getMinutes()).padStart(2,"0"),
String(now.getSeconds()).padStart(2,"0"),
String(Math.floor(Math.random()*10000)).padStart(4,"0"),
].join("");
newReqs.push({ //add the new req to the new reqList
status:"waiting",
caption:waitCap,
id:reqId,
});
setState( prevState => ({ //render the changed list of Reqs
...prevState,
reqList:newReqs,
}));
return ServerCalls[func](args)
.then((res)=>{
withReq(reqId, foundReq =>{ //update the req to show success
foundReq.status="success";
foundReq.caption=yayCap;
});
setTimeout(() => {
deleteReq(reqId); //remove it from display after 3 seconds
}, 3000);
return res;
})
.catch((err)=>{
withReq(reqId, foundReq =>{ //update the req to show failure
foundReq.status="failure";
foundReq.caption=foundReq.caption+" Failed!";
});
setTimeout(() => {
deleteReq(reqId); //remove it from display after 3 seconds
}, 3000);
throw err;
})
}
The problem here is that the callback functions in Promise.then() and Promise.catch() operate on state's initial value and not the value it has when the callback executes, due to scoping. This isn't a problem with class components, just functional ones.
Is there a way for a functional component to read its execution-time state from within a callback? Or is a workaround required?

Answer 1

There are 2 problems here:
You're mutating the existing state when you do
withReq(reqId, foundReq => { //update the req to show success
foundReq.status = "success";
foundReq.caption = yayCap;
});
Never mutate state in React - it can cause re-rendering problems.
The value in the .then callback is stale. Fix this by passing to callback the current (newly updated) state in a state setter function, instead of the old state:
const withReq = (argId, callback) => {
setState(prevState => ({
...prevState,
reqList: prevState.reqList.map(req => (
req.id === argId ? callback(req) : req
)),
}));
}
Then make sure callback doesn't mutate, but creates and returns a new object instead, eg:
withReq(reqId, foundReq => ({
...foundReq,
status: "success",
caption: yayCap,
}));