0

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

5
  • A qué te refieres con "No me deja extraer los datos......" ? Qué error tienes específicamente? el 21 jul. 2021 a las 13:45
  • Me refería a que me daba un error undefined. Ahora estoy viendo que si aplico un condicional antes if(!datosMeteocmsap) return null; ya no me da el error y con la siguiente carga del useeffect() ya me extrae los datos. el 21 jul. 2021 a las 14:29
  • Por favor edita tu pregunta, y puedes contestarla en una respuesta con tu solución el 21 jul. 2021 a las 14:43
  • Mas allá de la solución es necesario hacer esta pregunta: ¿Por que haces un setTimeout y llamas ala misma función de forma recursiva cada 100 segundos? el 21 jul. 2021 a las 19:16
  • El motivo es que al ser una estación meteorológica va dando la intensidad del viento, y la dirección. Para navegar es un tipo de aplicación muy útil. el 22 jul. 2021 a las 18:26

1 respuesta 1

0

Ahora estoy viendo que si aplico un condicional antes if(!datosMeteocmsap) return null; ya no me da el error y con la siguiente carga del useeffect() ya me extrae los datos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.