）（ジオロケーションを取得し、componentDidMountでAjaxリクエストを送信

Question

は（navigator.geolocation.getCurrentPositionを使用して、ユーザーのコンピュータから受け取った）

私の問題は、私は悩みを抱えているですすべてを考えると、これを行う正しい方法を考え出すことは、非同期的に実行されています。その後、私はcomponentDidMount（）を使ってうまくいくと思いましたが、残念ながらうまくいきませんでした。

がここにあります私のcodepen（サンセリフのAPIキー）

そして、ここではコードです：

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) 
     }) 
    } 

次のようにすべてが実行されているかの私の理解では、次のとおりです。

1. 初期コンポーネントが
をレンダリング
2. componentDidMount（）が呼び出され、ifステートメントを参照します。
3. はURIプロパティを見つけることができないので、新しいURIプロパティで状態を設定してgetCurrentPosition（）コールを開始します（私の知る限り、this.setStateは再レンダリングをトリガーする必要があります...）
4. componentDidMount私はよく分からないけど

を実行していない（）（）を再度実行しますが、この時間は、フェッチいくつかの未知の理由でURIプロパティ

を見つけ、今URIプロパティがあるが、私の最高の推測ではあります新しいcomponentDidMount（）が実行されるまでに、プログラムは何を設定するかを把握しています。しかし、私は完全に間違っているかもしれません。私は、componentDidMount（）がURIプロパティを見ず、連続的に再レン​​ダリングする無限ループを作成することもできました。

Answer 1

@brubは次のように述べています：componentDidMountは、uiがどれだけ更新されても、2回以上実行されません。私は解決策としてcomponentDidUpdateを使い終わった。ここにコードがあります：

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)) 
    }