Le rendu de l'enfant React précède celui du parent

Question

Je suis en train de créer une WeatherApp pour freecodecamp. J'ai créé une classe parent pour obtenir la géolocalisation et ensuite passer la valeur des coordonnées à Fetch.js, le problème est que lorsque j'exécute le programme, la console montre que Fetch est probablement exécuté en premier,

Par exemple, sur la console, les données montrent d'abord un objet vide pour Fetch.js et ensuite la console montre la géolocalisation que j'ai imprimée dans Geolocation.js.

Classe mère : Geolocation.js

import React from 'react';
import Fetch from './Fetch';

class GeoLocation extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      lon : null,
      lat : null
    };
    this.showPosition = this.showPosition.bind(this);
  }
   componentDidMount(){
     if (navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(this.showPosition);
     } else {
          console.log("Geolocation is not supported by this browser.");
     }
   }
  showPosition(position) {
    this.setState({lon:position.coords.latitude,lat:position.coords.longitude})
    console.log(this.state);
   }
   render(){
     return (
       <div>
       <Fetch lon={this.state.lon} lat={this.state.lat} />
       </div>
     )
   }
}
export default GeoLocation;

Fetch.js :

import React from 'react';
import LocalWeather from './LocalWeather';
import Icon from './Icon';

class Fetch extends React.Component{
  constructor(props){
    super(props);
    this.state = {};
    this.selectHandler = this.selectHandler.bind(this);
    this.setStateAsync = this.setStateAsync.bind(this);
  }
  setStateAsync(){
    return new Promise((resolve)=>{
      this.setState(this.state,resolve)
    })
  }
  async componentDidMount(){
    console.log(this.props.lat);
    if(this.props.lat && this.props.lon){
      const res = await fetch(`https://fcc-weather-api.glitch.me/api/current?lat=${this.props.lat}&lon=${this.props.lon}`);
      const {data} = await res.json();
      const temp =  data.main['temp'] ;
      const icon = data.weather[0].icon ;
      await this.setStateAsync({temp:temp,icon:icon});
      console.log(data);
    }
    else {
      this.setStateAsync({temp:'',icon:''});
      console.log('nothing');
    }
  }
  selectHandler(temp){
    this.setState({temp:temp})
  }
  render(){
    return(
      <div>
      <LocalWeather temp={this.state.temp} on_click={this.selectHandler} />
      <Icon src={this.state.icon ? this.state.icon : ''} />
      </div>
    )
  }
}

export default Fetch;

Answer 1

Vous pouvez effectuer un rendu conditionnel Fetch en vérifiant si les coordonnées se trouvent déjà dans l'état :

<div>
  { this.state.lon && this.state.lat && <Fetch lon={this.state.lon} lat={this.state.lat} /> }
</div>