2

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.

1 respuesta 1

6

Así es como funciona React JS.

Cuando el componente padre se acopla al árbol DOM, se dispara un primer snapshot de la app en memoria, aquí se propagan objetos como state y props a los componentes Leaf.

Este primer snapshot, es lo que te muestra la consola en el primer console.log(this.state.date).

No hay datos en el estado, configuración inicial.

Luego, el Lifecycle Method componentDidMount(), espera a que se acople el componente para ejecutar alguna acción. En este caso, en algun punto de la función que llamas ahí dentro, tienes un API method setState, que dispara otro snapshot(conocido como re-render).

Este segundo snapshot, es el segundo console.log(this.state.date) que te muestra la consola.

Aqui ya vez los datos en el estado, pues la operación asíncrona ya se completó.

Se puede decir que un snapshot, es una recarga (re-render) del árbol virtual DOM de React en la memoria del explorador web, es imperceptible a simple vista, pasa muy rápido. Pero se puede observar por medio de capturas en la consola.

Espero que esta respuesta sea de ayuda,

Saludos

2
  • Cuando hago un console.log('string') también se imprime 2 veces en la consola, pero en otro proyecto que estoy haciendo con un curso de React no sucede esto, ya hice una prueba en ese proyecto igualmente con un console.log('string') y en ese proyecto no se imprime 2 veces, solo una. Y por esto me esta causando problema en otros componentes, debuggeando llegue hasta ahí, que es donde se re-imprime, pero no se por qué. Commented el 17 jul. 2020 a las 11:53
  • 3
    @DanielSantos lo que el compa;ero trata de decir, es que la función render() se está llamando 2 veces, la primera vez, cuando se renderiza el componente, y la segunda vez, en el componentDidMount() cuando llamas al getData. La función render() se llama por muchas razones, cuando se utiliza setState, cuando cambien los props o incluso desde el componente forzando el cambio del state con this.forceUpdate() Commented el 17 jul. 2020 a las 13:54

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.