Erste Geolocation und Senden einen Ajax-Request in componentDidMount()

Question

Ich versuche, einen Wetter-API mit den Koordinaten von dem Computer des Benutzers mit navigator.geolocation.getCurrentPosition()

Mein Problem ist, ich habe Probleme empfangen zu nennen Den richtigen Weg finden, dies zu tun, wenn alles asynchron läuft. Dann dachte ich, ich hätte mit componentDidMount() ein gutes Workaround gefunden, aber leider hat es nicht funktioniert.

Hier ist meine codepen (sans-API-Schlüssel)

Und hier ist der Code:

state = { 
     data: "Please wait while you're weather is loading...", 
    } 
    componentDidMount() { 
     this.state.hasOwnProperty('uri') ? 
      fetch(this.state.uri).then((res) => res.json()) 
      .then((data) => this.setState({ 
       data: { 
        tempString: data.current_observation.temperature_string, 
        realTemp: data.current_observation.feelslike_string, 
        skyImg: data.current_observation.icon_url.substring(0, 4) + 's' + data.current_observation.icon_url.substring(4), 
        location: data.current_observation.display_location.full, 
        temp_f: data.current_observation.temp_f, 
       } 
      })) 
      .catch((err) => console.log(err.message)) 
     : navigator.geolocation.getCurrentPosition((pos) => { 
      this.setState({ 
       uri: "https://api.wunderground.com/api/{API GOES HERE}/conditions/q/" + pos.coords.latitude.toString() + "," + pos.coords.longitude.toString() + ".json" 
      }) 
      console.log(this.state.uri) 
     }) 
    } 

Mein Verständnis davon, wie alles läuft wie folgt dar:

1. Erste Komponente macht
2. componentDidMount() wird aufgerufen und prüft die if-Anweisung
3. kann die URI-Eigenschaft nicht finden, startet also den getCurrentPosition() -Aufruf und setzt den Status mit der neuen URI-Eigenschaft (nach meinem Wissen sollte this.setState ein erneutes Rendern auslösen, und dann ...)
4. componentDidMount() wieder läuft, aber dieses Mal findet die URI-Eigenschaft
5. aus einem unbekannten Grund, holen() nicht
läuft

obwohl ich nicht sicher bin, meine beste Vermutung ist, obwohl es jetzt ist URI-Eigenschaft , nach der Zeit die neue KomponenteDidMount() ausgeführt wird, ist das Programm immer noch dabei herauszufinden, wie es eingestellt wird. Aber ich könnte völlig falsch liegen. Ich hätte auch eine Endlosschleife erstellen können, wo componentDidMount() nie eine URI-Eigenschaft sieht und kontinuierlich neu rendert.

Answer 1

Wie @brub sagte: componentDidMount läuft nicht mehr als einmal, egal wie viel die UI aktualisiert wird. Am Ende habe ich componentDidUpdate als Lösung verwendet. Hier ist der Code jetzt:

state = { 
     data: "Please wait while you're weather is loading...", 
    } 
    componentDidMount() { 
     navigator.geolocation.getCurrentPosition((pos) => { 
      this.setState({ 
       uri: "https://api.wunderground.com/api/{API GOES HERE}/conditions/q/" + pos.coords.latitude.toString() + "," + pos.coords.longitude.toString() + ".json" 
      }) 
     }) 
    } 
    componentDidUpdate() { 
     fetch(this.state.uri).then((res) => res.json()) 
     .then((data) => this.setState({ 
      data: { 
       tempString: data.current_observation.temperature_string, 
       realTemp: data.current_observation.feelslike_string, 
       skyImg: data.current_observation.icon_url.substring(0, 4) + 's' + data.current_observation.icon_url.substring(4), 
       location: data.current_observation.display_location.full, 
       temp_f: data.current_observation.temp_f, 
      } 
     })) 
      .catch((err) => console.log(err.message)) 
    }