Tengo un component que al poner una función dentro del método componentDidMount
me ejecuta 2 veces lo que tengo en el método render, la 1ra que es la debería ejecutar y vuelve y me ejecuta lo mismo y si pongo otra función dentro del componentDidMount
se ejectura una más, o sea 3 veces.
Me di cuenta de esto porque estaba validando algunos datos con el console.log
en el método render
y mostraba 2 veces la data que pasaba por el console.log
.
Aquí mi código, hasta ahora estoy empezando en React y he revisado todo y no se por qué me pasa esto.
import React from 'react';
class WeatherApp extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
}
}
componentDidMount = () => {
this.geolocation(this.location);
}
geolocation = position => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position);
} else {
console.log('No Soporta ubicación')
}
}
location = async position => {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
await this.getData(latitude, longitude);
}
getData = async (lat, lon) => {
const latitude = lat;
const longitude = lon;
const API_URL = `https://api.openweathermap.org/data/2.5/onecall?
lat=${latitude}&lon=${longitude}`;
const API_KEY = `c196bcdce7bad59b552b30dbfefd9b2b`;
try {
const response = await fetch(`${API_URL}&appid=${API_KEY}`);
const data = await response.json();
this.setState({
data: data,
});
} catch(error) {
console.log(error.message)
}
}
render() {
console.log(this.state.data);
const lat = this.state.data.lat
return(
<div>{lat}</div>
);
}
El JSX se renderiza una vez pero el console.log(this.state.date)
se pinta 2 veces en la consola, una con el array vacio del estado y otra con la data de la petición ya en el estado, si pongo un console.log
con algún string me muestra igualmente 2 veces el string en la consola.