Mi valor useState de la ciudad, Londres predeterminado, no funciona con la URL del valor de búsqueda que se llama en mi función getWeather. Se ejecuta a veces cuando vuelvo a renderizar el código por accidente, pero no en ningún otro momento.
import './App.css'; import Daily from './components/daily'; import {useState, useEffect} from 'react' function App() { const [city, setCity] = useState('London') const [weatherData, setWeather] = useState([]) const getWeather = async() =>{ try{ const resp = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=f8d957da06af592a1390c360ea801908&units=metric`) const pResp = await resp.json() setWeather(pResp) } catch{ console.log('error') } } useEffect(()=>{ getWeather() },[]) return( <> <Daily {...weatherData}></Daily> </> ) } export default App; code hereEl problema era que los datos meteorológicos se estaban pasando antes de que se buscaran y formatearan correctamente, para solucionarlo, agregué una pantalla de carga y un retraso en el procesamiento para que los datos siempre estén allí Código nuevo
import './cssdirect/App.css'; import Daily from './components/daily'; import {useState, useEffect} from 'react' import Loading from './Loading'; function App() { const [loading, setLoading] = useState(true) const [city, setCity] = useState('paris') const [weatherData, setWeather] = useState([]) const getWeather = async() =>{ setLoading(true) try{ const resp = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=f8d957da06af592a1390c360ea801908&units=imperial`) const pResp = await resp.json() setWeather(pResp) setLoading(false) } catch{ console.log('error') } } useEffect(()=>{ getWeather() },[]) if(loading==true){ return <Loading/> } else{ return <Daily {...weatherData}/> } } export default App;