Tengo una situación que no entiendo.
Estoy haciendo una llamada a una API
de meteorologia:
const [datosVientocna, setDatosVientocna] = useState([])
const urlcnarenal =
'https://api.oceandrivers.com:443/v1.0/getWeatherDisplay/cnarenal/?period=latesthour';
const obtenerMeteocna = async () => {
const api = await fetch(urlcnarenal)
const datosMeteo = await api.json()
setDatosVientocna(datosMeteo.LATEST_DATA)
setTimeout (() => {
obtenerMeteocna()
}, 100000)
console.log(datosMeteo)
}
useEffect(() => {
obtenerMeteocmsap()
obtenerMeteocna()
}, [])
Al hacer el console.log, me aparece toda la info de la api, que estoy buscando.
Al pasar la info a través del state al componente de React.
<DatosMeteo
datosMeteocna = {datosVientocna}
rotuloscna={rotuloscna}
/>
Lo recojo en el componente:
export const DatosMeteo = ({datosMeteocmsap, datosMeteocna, rotuloscmsap,
rotuloscna}) => {
<Fragment >
<div className='container mt-3'>
<div className='col'>
<div className='card card-block h-100 rounded'>
<div className='card-body'>
<h5 className="card-title bg-primary rounded">{rotuloscna}</h5>
<h5 className="card-title bg-primary rounded">Condiciones de Viento</h5>
<div className='container'>
<div className='card-body text-center'>
<H2Viento> {datosMeteocna.TWS} kn</H2Viento>
<h4>Racha: {datosMeteocna.TWS_GUST} kn</h4>
<h4>Dirección: {datosMeteocna.TWD}º {degToCard (datosMeteocna.TWD)}</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</Fragment>
);
}
Si hago esta programación funciona perfectamente.
Pero si en lugar de hacer la llamada a la API
de esta forma lo hago usando:
const obtenerMeteocna = async () => {
const api = await fetch(urlcnarenal)
const datosMeteo = await api.json()
setDatosVientocna(datosMeteo.LATEST_DATA)
setTimeout (() => {
obtenerMeteocna()
}, 100000)
console.log(datosMeteo)
}
Al hacer la busqueda en el componente React, usando:
<H2Viento> {datosMeteocna.LATEST_DATA.TWS} kn</H2Viento>
<h4>Racha: {datosMeteocna.LATEST_DATA.TWS_GUST} kn</h4>
<h4>Dirección: {datosMeteocna.LATEST_DATA.TWD}º {degToCard (datosMeteocna.LATEST_DATA.TWD)}</h4>
No me deja extraer los datos......
¿Que puede ser? Gracias
setTimeout
y llamas ala misma función de forma recursiva cada 100 segundos?