2017-12-31 146 views
1

は(navigator.geolocation.getCurrentPositionを使用して、ユーザーのコンピュータから受け取った))(ジオロケーションを取得し、componentDidMountでAjaxリクエストを送信

私の問題は、私は悩みを抱えているですすべてを考えると、これを行う正しい方法を考え出すことは、非同期的に実行されています。その後、私は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. をレンダリング
  3. componentDidMount()が呼び出され、ifステートメントを参照します。
  4. はURIプロパティを見つけることができないので、新しいURIプロパティで状態を設定してgetCurrentPosition()コールを開始します(私の知る限り、this.setStateは再レンダリングをトリガーする必要があります...)
  5. componentDidMount私はよく分からないけど

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

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

  • +1

    なぜcomponentDidMountは2回以上実行されますか?コンポーネントがマウントされると、1回だけ実行されます。 – brub

    +0

    ありがとう!私は完全に、最初の実装上のcomponentDidMount、および再レンダリングではないことを見落とした。 –

    答えて

    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)) 
        } 
    
    関連する問題