Update a value before to request into API - reactjs

Question

I'm working in a project where I have to modify a value certain number of times before I make a request to an API. The problem is that when I'm using hooks to update the value, when I'm trying to update the value, as useState is asynchronous, the update of the value stays in a past value. However the value get modified after doing the request.
How can I make that the value updated before my request?
Here is the code:
useEffect(() => { // I'm using a useEffect hook to verify that my variable is updated. But that update is done late.
console.log(valorTotal);
}, [valorTotal]);
const agregarPlato = async () => {
if(validarCamposPlato()){
try{
let valorParcial = 0;
let platoExist = await encontrarPlato(config, rvPlato);
if(platoExist === true){
setAgregadoMin(true);
platoCodigo = await obtenerCodigoPlato(config, rvPlato);
platosRegVent.push({codigoPlato: platoCodigo, cantidad: rvCantidad});
let costoPlato = await obtenerValorPlato(config, rvPlato);
valorParcial = valorTotal;
setValorTotal(valorParcial += (costoPlato * parseInt(rvCantidad))); // Here is where I'm changing the value of my variable.
setRvPlato('');
setRvCantidad('');
}
else{
toast.error('The object wasn't found.');
setRvPlato('');
}
}
catch(error){
toast.error('An unexpected error has ocurred');
props.handleSubmit();
}
}
}
const finalizarRegVent = async () => {
console.log(agregadoMin);
if(validarCampos()){
try{
if(rvPlato !== '' || rvCantidad !== ''){
agregarPlato(); // Here I'm calling the function above
}
if(agregadoMin === true){
rvCodigo = await crearRegistroVenta(config, valorTotal, fechaActual, regVentMesa); // Here I'm doing the request to save the value
platosRegVent.forEach( (plato : any) => {
crearRegVentPlato(config, rvCodigo, platosRegVent.codigoPlato, platosRegVent.cantidad);
});
valorFinal = true;
}
else{
toast.error('You have to add an object before doing this option.');
}
}
catch(error){
toast.error('An unexpected error had happened.');
props.handleSubmit();
}
}
}
Thank you for your help.

Answer 1

Please try to use await in front of the calling function.
if(rvPlato !== '' || rvCantidad !== ''){
await agregarPlato();
}
And write below code inside of hook event.
useEffect(() => {
if(agregadoMin === true){
rvCodigo = await crearRegistroVenta(config, valorTotal, fechaActual, regVentMesa);
...
} else {
toast.error('You have to add an object before doing this option.');
}
}, [agregadoMin])
Then if agregadoMin is changed, hook will monitor changes and execute accordingly
Hope this helps you to understand.