El evento onChange no devuelve el primer cambio de la entrada de texto, pero funciona en los cambios posteriores. Lo siento si esto es obvio, soy nuevo en React.
import React, { useState } from 'react'; import axios from 'axios'; function Header() { const [text, setText] = useState(""); const [location, setLocation] = useState(""); function handleChange(event) { setText(event.target.value); } // when submit button clicked, current state of the text input is stored inside location constant function handleClick() { setLocation(text); const geoCoderURL = "http://api.openweathermap.org/geo/1.0/direct?q=" + location + "&limit=5&appid={apikey}" function getCoordinates(url) { axios.get(url).then((response) => { const locationLat = response.data[0].lat; const locationLon = response.data[0].lon; }); } getCoordinates(geoCoderURL); } return ( <div> <h1>Five Day Forecast</h1> <input onChange={handleChange} type="text" name="name"autoFocus placeholder="Enter location here."/> <button type="submit" onClick={handleClick}>Forecast</button> </div> ) } export default Header;Cuando llamas a setLocation(text); , handleClick finalizará la ejecución antes de que se actualice realmente el valor de la location .
No hay necesidad de location y setLocation ; parece que tal vez se supone que la location es la misma que el text .
function handleClick() { const geoCoderURL = "http://api.openweathermap.org/geo/1.0/direct?q=" + text + "&limit=5&appid={apikey}" function getCoordinates(url) { axios.get(url).then((response) => { const locationLat = response.data[0].lat; const locationLon = response.data[0].lon; }); } getCoordinates(geoCoderURL); }