Creé una función asíncrona para llamar a una API meteorológica que devolverá la información solicitada enviada. La función funciona bien, sin embargo, cuando llamo a esta función dentro de un componente de clase, el resultado se devuelve dos veces. Esto no es exactamente un error de última hora, pero prefiero que no se produzcan dos llamadas a la API si no es necesario y tengo curiosidad por saber por qué este método se llama dos veces en primer lugar.

Aquí está mi código.

 async function submitQuery(props) { //Incase I decide to add aditional parameters such as city, country etc.. I've decided to place the zip property in an object so I can just //add additional properties in the submissions object const submission = { zip: props, }; if (!Number(props)) return console.log("this is not a number"); const { error } = await validate(submission); if (error) return console.log(error.message); const config = { method: "get", url: `https://api.openweathermap.org/data/2.5/weather?zip=${props}&appid=${apiKey}`, headers: {}, }; /* const query = await axios(config).then(function (response) { const result = response.data.main; return result; }); */ //console.log(query); return 4; }

 class WeatherReport extends React.Component { getResults = async () => { const result = await submitQuery("08060"); console.log(result); }; render() { return ( <div className="reportContainer"> <WeatherCard getResults={this.getResults} /> </div> ); } }

 const WeatherCard = ({ getResults }) => { getResults(); return <div></div>; };