Tengo un problema con una función simple en la que quiero llamar a una API y luego hacer algo con la respuesta. Básicamente, solo quiero establecer el estado de mi componente de reacción en la respuesta que recibo y luego navegar a la otra página. El problema es que mi código ejecuta otra parte de la función antes de que finalice una llamada a la API, y termino en otra página con consola.log de indefinido
Ahí está mi función:
const startNewGame = () => { GameService.startGame() .then((response) => { setGame(response.data); console.log(game); navigate('intro'); }) .catch((e) => { console.log(e); }); }; Puedo envolver mi navegación en if(!game !== undefined) pero luego tengo que hacer clic dos o más veces en un botón.
Gracias a todos por la ayuda chicos :)
Probablemente haga varias cosas incorrectas al mismo tiempo, por lo que comprender qué es exactamente lo que está mal puede llevar algo de tiempo. Siga estos pasos para depurar su código:
.then haga solo una cosa (y respete ese principio en otros casos). Puedes encadenar tantos como quieras. Además, podría devolver datos de uno .then al siguiente, por lo que su código podría verse así: GameService.startGame() .then(response => response.data) .then(data => { setGame(data) }) .then(() => { console.log(game); navigate('intro'); }) .catch((e) => { console.log(e); });Comprenda la composición de sus componentes. ¿Dónde exactamente estás guardando tu respuesta? ¿Es solo el componente local useState o algún estado de Context Api que envuelve la aplicación? Cuando navegue a "otra página", su estado de "página actual" no estará disponible para "otra página" a menos que mantenga los datos en algún lugar del árbol cuando ambas páginas puedan acceder a eso.
Para obtener más referencias, tenga en cuenta que setGame es asincrónico, por lo que debe esperar a que se actualice el estado para asegurarse de que esté actualizado.
Prueba esto:
const startNewGame = () => { GameService.startGame() .then((response) => { setGame(response.data); // game is not updated yet // console.log(game); <- Remove this line // navigate('intro'); <- Remove this line }) .catch((e) => { console.log(e); }); }; useEffect(()=>{ if(game !== undefined){ navigate('intro') } }, [game])