0

Tengo una aplicación para mostrar los datos del clima, 1 componente resuelve una api de ubicación y otra para mostrar los datos del clima dependiendo de esa ubicación.

Lo estoy haciendo con useEffect pero me sale error como que no estoy recibiendo los datos.

Componente de ubicación:

Aqui lo que hago es obtener la ubicacion pasandole la longitud y latitud, retornandola y exportandola

 const getData= async (long, lat)=>{
  
      const promise= await fetch(`https://api.mapbox.com/geocoding/v5/mapbox.places/${long},${lat}.json?access_token=pk.eyJ1IjoiZGV4Y2FybG9zIiwiYSI6ImNrb2hzNmd6MjBudGQybmxsMHFybjNvZW0ifQ.VTlqEeCl-zmlMFe-5_fYJQ`)
        const results = await promise.json()
      return results
          }

  export default getData

Componente de clima:

Aquí obtengo la información del clima pasando el nombre de la ciudad

const getWeatherData= async(name)=>{
    const api = {
        key: "key",
        base: "https://api.openweathermap.org/data/2.5/"
      }

      const promises = await fetch(`${api.base}weather?q=${name}&units=metric&APPID=${api.key}`)
      const results = await promises.json()
      return results
}

export default getWeatherData

aquí ya junto los dos componentes en el useEffect pero el error mencionado anteriormente.

 navigator.geolocation.getCurrentPosition(function(data){
    setLongitude( data.coords.longitude); //longitud
   setLatitude( data.coords.latitude)}) // latitud


  useEffect(()=>{


  getData(longitude,latitude).then(data=>{ //COMPONENTE1, aqui le paso la lon y lat 
   
console.log(data) //al hacer un console.log si me muestra los datos en consola correctamente

    let city_name=data.features[1].text  // guardo en una variable el nombre de la ciudad pero aqui me sale un error de **Uncaught (in promise) TypeError: Cannot read property 'text' of undefined  at weather.js:27**
    getWeatherData(city_name) //COMPONENTE2 aqui le paso el nombre de la ciudad
          .then(result => {
            setWeather(result); //guardo los resultados del clima en una variable de estado
          });
  })
  },[])


[![aqui es el console.log(data)][1]][1]


  [1]: https://i.sstatic.net/Sl3Sl.png
3
  • podras mostrar el json que te devuelve en el console.log(data);
    – Daniel
    Commented el 22 jun. 2021 a las 6:18
  • de donde estas sacando data.feautures[1].text, porque siguiendo tu api https://api.openweathermap.org/data/2.5/weather?q=London&units=metric&APPID=5b881f6447593d97ee91f3b5027f1e09 no da el features y si quieres obtener el nombre de la ciudad, el campo name nomas es data.name y aqui puedes usar un operador para validar si existe o no, data.name ?? "no existe"
    – Daniel
    Commented el 22 jun. 2021 a las 6:41
  • En principio te recomiendo no compartir tus keys. Commented el 22 jun. 2021 a las 10:05

1 respuesta 1

0

Una forma interesante de obtener datos es utilizando una librería llamada axios

Este pequeño ejemplo puede parecer un poco diferente pero es una mejor forma de obtener datos de una API, utilizando useState y useEffect.

    import axios from "axios";

const App = () => {
    const [weather, setWeather] = useState([])
    const [capitalCity, setCapitalCity] = useState("city");

     useEffect(() => {
        axios
          .get(`${urlWeather}${newAccessKey}&query=${capitalCity}`)
          .then((response) => {
            setWeather(response.data);
          });
      }, [newAccessKey, capitalCity]);

          ... 
};

Si quieres ver un ejemplo real más completo puedes acceder a mi repositorio en GitHub aquí

Tu Respuesta

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

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