Voy a intentar ser lo más claro y detallado posible.
Tengo un componente en React que tiene dos estados:
const [operationId, setOperationId] = useState(null)
const [categoryId, setCategoryId] = useState(null)
Y tengo un form cuyo submit dispara tres funciones
<form onSubmit={handleSubmit}>
function handleSubmit (event) {
event.preventDefault()
checkSubmit();
onSubmitData();
setTimeout(updateData,9000)
}
Las tres funciones del handler son las siguientes:
function checkSubmit () {
//Verifica si el arreglo de categorías está vacio, y si lo está crea una por default
if (props.categories.data.length === 0) {
axios.post("/categories/", category)
return;
}
//En caso que haya categorías en el arreglo, compara si hay alguna existente. Caso afirmativo,
//sale de la funcion, de otra forma realiza un post con la nueva categoría.
for (var i = 0; i < props.categories.data.length; i++) {
if (props.categories.data[i].name === category.name) {
setCategoryId(props.categories.data[i].id)
return;
}
}
axios.post("/categories/", category)
.then(res => setCategoryId(res.data.id))
}
function onSubmitData () {
axios.post("/operations", data)
.then(res => setOperationId(res.data.operationId))
}
function updateData () {
axios.post(`/operations/${operationId}/${categoryId}`)
console.log("Recién ahora se hizo el dispatch")
console.log("operationId dentro de updateData", operationId)
console.log("categoryId dentro de updateData", categoryId)
}
Mi problema es este: Todo funciona perfecto y se realizan las peticiones en las rutas correctamente hasta que llega a updateData.
Cuando intenta realizarse la peticion a la ruta ("/operations/${operationId}/${categoryId}"), operationId y categoryId siguen con los valores iniciales (null). Por tanto, se realiza una peticion a ("/operations/null/null"), lo que logicamente no funciona.
Sin embargo, fuera de la funcion, categoryId y operationId si tienen sus valores correspondientes. Simplemente que por alguna razon no llegan a la funcion, siendo que estas provienen directamente de los estados de React (operationId y categoryId toman sus valores una vez que se realizan las peticiones y el servidor responde. Ya probe miles de maneras, con setTime, sin setTime, async, await, etc, etc, pero siempre queda con el null.
Dejo captura de la consola del navegador