Estoy usando axios para obtener datos de una url. Luego estoy almacenando los datos obtenidos en la post usando setPost() . Una vez que los datos se almacenan en post , los estoy decodificando usando una función getData() que asigna además los datos decodificados a metar usando setMetar() . El usuario ingresa datos en una input y hace clic en el botón submit para obtener los datos decodificados. El problema es que se necesitan 2 clics para obtener los datos decodificados en lugar de 1. Aquí está mi código:
import React, { useState, useEffect, useReducer, useCallback } from "react"; import "./Search.css"; import axios from "axios"; import parseMETAR from "metar"; let dataList = ""; const Search = () => { const [post, setPost] = useState(null); const [icao, setIcao] = useState(""); const [metar, setMetar] = useState(""); useEffect(() => { getData(icao); }, []); const getData = (code) => { try { console.log(code); const url = `Some url`; console.log(url); axios.get(url).then((response) => { setPost(response.data); getMetar(); }); } catch (err) { console.log(err); } }; const getMetar = () => { // decode the raw text setMetar(mtr); }; const handleInputChange = (e) => { setIcao(e.target.value); }; const handleSubmit = (e) => { e.preventDefault(); getData(icao); }; return ( <div className="search-div"> <h2>Search METAR</h2> <form> <input type="text" placeholder="Enter ICAO" onChange={(e) => handleInputChange(e)} /> <button onClick={(e) => handleSubmit(e)}>Get Metar</button> </form> <h3>METAR: {metar.length > 0 && metar}</h3> </div> ); }; export default Search; Tan pronto como se hace clic en el botón, la consola muestra los datos correctos almacenados en el icao . Pero, el valor de metar no se representa. ¿Cómo espero a que axios obtenga los datos obtenidos? Si esto no es un problema, ¿cómo obligo al componente de Search a volver a procesar después de las funciones de actualización de cada variable useState ?
setPost es una operación asíncrona. Y estás llamando a getMetar() justo después. Como resultado, su primer clic registra la carga útil y obtiene los datos en el segundo clic. De esta manera, en realidad te faltan los datos de la segunda llamada a la API. Obtendrá la carga útil actualizada en su tercer clic.
Puede establecer un gancho useEffect con dependencia post . Entonces, cuando post se actualiza con los datos de la API, llama a getMetar()
useEffect(() => { getMetar(); }, [post]);Si necesita cargar datos mientras se ejecuta la aplicación, usar useEffect Hook es bastante simple.
import {useEffect} from 'react'; useEffect(() => { getMetar(); },[post])