why setState hook in the map set last object only? - hook

Question

I have 2 components in react-admin the child one set the state of the parent one.
the child component has useEffect to trigger the following method in parent component
const [approved, setAproved] = useState([]);
useEffect(() => {
console.log(JSON.stringify(approved))
}, [approved])
const setapprovedamount = (id, approvedAmount) => {
if(approved.length!==0)
{
// if the child run 3 times
// this line runs 3 times
console.log("set Aproved with" +id+ " and amount : "+approvedAmount)
// but this line update only the last object
setAproved(
approved.map(item =>
(item.id == id)
? {...item, totalApproved : approvedAmount}
: item
)
)
}
else
{
setAproved(approved =>[...approved, {
id: id,
totalApproved: approvedAmount
}] )
}
}
useEffect(() => {
console.log(JSON.stringify(approved))
}, [approved])
So **for example** if I have 3 times load, the Console is:
file.js:168 set Aproved with44 and amount : 799.71
file.js:168 set Aproved with45 and amount : 845.98
file.js:168 set Aproved with46 and amount : 890.83
file.js:96
[{"id":44,"totalApproved":null},{"id":45,"totalApproved":null},{"id":46,"totalApproved":890.83}]
so the method runs 3 times as it is triggered but, it is setting only the last value rendered in the state array in the parent component

Answer 1

Because of how State and Lifecycle works.
If you wanted to fire multiple and chained state updates throughsetState, you need to let the component complete its cycle at each state update - first things first.
Therefore, the basic solution is to imply the use of chained setTimeout calls to delegate each state update, letting each function call complete a component, full life cycle.
setTimeout(function() {
setState(firstState)
setTimeout(function() {
setState(secondState)
});
});