Estoy haciendo una aplicación de reacción de tienda muy simple que habla con una API de back-end simple que hice. Estoy tratando de crear un sistema de carrito que realice una solicitud POST utilizando la biblioteca Axios cada vez que se carga la página. La API devolverá un objeto de carrito y tendrá una identificación única. Quiero almacenar esta identificación en un estado para poder pasarla a otras páginas para rastrear la tarjeta actual.

Aquí está el código para la función que maneja la realización de una solicitud POST con Axios y el almacenamiento de esos datos en el estado currentCartID :

 const makeAPIPOSTRequestForCart = () => { setAPIRequestIsLoading(true); Axios.post('http://localhost:5512/carts/create').then((response) => { setCurrentCardID(response.data._id); // <-- THIS IS THE SET METHOD FOR THE STATE console.log('===================================='); console.log('STATUS: ' + response.status); console.log('ID: ' + response.data._id); console.log('STATE OBJ: ' + currentCartID); // <--- PRINTS OUT NOTHING OR UNDEFINED console.log('===================================='); setAPIRequestIsLoading(false); }); };

Esta función se llama cada vez que la página se carga con el useEffect hook así:

 useEffect(() => { makeAPIGETRequest(); if (isCartMade === false) { makeAPIPOSTRequestForCart(); // <--- CALL TO POST FUNCTION RIGHT HERE setIsCartMade(true); } }, []);

El problema es que cada vez que hago esta solicitud, la API responde con un objeto de carrito y puedo ver la identificación, sin embargo, parece que no puedo establecer el estado en la identificación actual, que es una cadena. Me aseguré de que el tipo sea correcto, sin embargo, nada funciona. Cada vez que intento imprimir el estado, todo lo que obtengo es undefined o una línea en blanco. Parece que la función de estado de actualización no funciona correctamente.

¡Soy bastante nuevo para reaccionar, por lo que cualquier ayuda sería muy apreciada! :)