ReactでsetStateを使用して複数のJSONリクエストを配列にプッシュする方法

Question

私はdataという状態を設定し、getInitialState（）で空の配列として宣言しました。さらに、私はajax呼び出しを行い、componentDidMount（）の代わりにJSONを取得しました。

setStateメソッドを使用して、データと呼ばれる配列に複数のJSONリクエストをプッシュするにはどうすればよいですか？

var Forecast = React.createClass({ 

    getInitialState() { 
     return { 
      data: [] 
     } 
    }, 

    componentDidMount: function() { 
     this.serverRequest = $.get('http://api.openweathermap.org/data/2.5/weather?zip=3000,au&appid=005fa98ae858a29acf836ecdefac0411', function(result) { 
      var tempData = result; 
      this.setState({ 
       // Is there any way to push multiple JSON into an array? 
       // below line of code is my attempt 
       data: tempData 
      }); 
     }.bind(this)); 
    } 

    ... 
} 

Answer 1

：あなたはプロトコルに従ってされていません。その種の

this.serverRequest = $.get('http://api.openweathermap.org/data/2.5/weather?zip=3000,au&appid=005fa98ae858a29acf836ecdefac0411', function(result) { 
    var tempData = JSON.parse(result); 
    this.setState({ 
     data: tempData // reset the data 
    }); 
}.bind(this)); 

何かが

EDITに動作しますAPIのあなたはJSONオブジェクトにアクセスする場合と同じように行く

（したがって、あなたがdata[0]を言うことができない）、明らか配列でない

{"coord":{"lon":144.96,"lat":-37.81},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04n"}],"base":"stations","main":{"temp":283.48,"pressure":1032,"humidity":76,"temp_min":282.15,"temp_max":285.15},"visibility":10000,"wind":{"speed":4.6,"deg":360},"clouds":{"all":75},"dt":1497828600,"sys":{"type":1,"id":8201,"message":0.0048,"country":"AU","sunrise":1497821707,"sunset":1497856068},"id":0,"name":"Melbourne","cod":200} 

：

私は手動でブラウザにそれを入力し、この結果を得ました

console.log(data["coord"]); // this will return {"lon":144.96,"lat":-37.81}

EDIT：あなたが要求のリストを保存したい場合は、あなたがこれを実行する必要があります。

this.setState({ 
    data: this.state.data.concat(tempData) 
}) 

Answer 2

「api.openweathermap.org」からの応答が、配列ではなくプレーンJavaScriptオブジェクトとして表示されているようです。したがって、初期状態をconsole.logrenderの方法で変更する必要があります。あなたが状態でdata配列にあなたの応答を入れたい場合は

getInitialState() { 
    return { 
     data: null 
    } 
} 

render() { 
    console.log(this.state.data); 
    //... 
}) 

、concatを使用しています。

私はjQueryのオートはあなたのための配列に変換されないかなり確信して

this.setState({ 
    data: this.state.data.concat([tempData]) 
}); 

Answer 3

したがって、返されたオブジェクトを配列に追加して追加しますか？

これについて何：

... 
this.setState({ 
    data: this.state.data.concat(tempData) 
}); 

あなたはまたstate.data配列にそれをプッシュすることができたが、その後もう一つのステップが必要です。

this.state.data.push(tempData); 
this.setState({ 
    data: this.state.data 
}); 

そして、それは状態を変更するために、意味し、それは良い習慣ではありません。その例ではOKかもしれませんが、それは良い習慣ではありません。