JSONデータを変数に割り当てて、Reactで状態にアクセスしているときにエラーが発生しました

Question

最近React.jsで始まり、単純な天気アプリを作成しようとしています。コンソールがOpenWeatherMap APIから受け取ったJSON文字列を出力しているので、GET要求に問題はありませんでしたが、JSONをローカル変数に割り当ててプロパティにアクセスする際に問題があるようです。

getInitialState : function(){ 
     return (
      {weatherdata: null } 
      ); 
    }, 

componentWillMount : function(){ 
    HttpService.get() 
    .then(function(jsondata){ 
     console.log(jsondata); 
     this.setState({weatherdata : jsondata});  
     }.bind(this));         
}, 

コンソールは私に2つのエラーを与え、反応のdevのツールは、負荷に拒否： キャッチされない例外TypeErrorを：プロパティ

キャッチされない（約束で）例外TypeErrorヌルの「メイン」読み取ることができません：プロパティを読み取ることができません「を_currentElement this.state.weatherdata.main.temp、

：ヌル（...）

'の最初のものは

React.createElement（今日、{TEMP行に私を指し私が直接weatherdataオブジェクト内のすべてのデータを貼り付ける場合

はここで、今、レンダリング機能

return(
    <div> 
     <Today temp={this.state.weatherdata.main.temp} 
       windSpeed={this.state.weatherdata.wind.speed} 
       windAngle={this.state.weatherdata.wind.deg} 
       icon={this.state.weatherdata.weather[0].icon} 
       iconID={this.state.weatherdata.weather[0].id} 
       iconDesc={this.state.weatherdata.weather[0].description} /> 
    </div> 
); 

内側戻しの抜粋ですが、正常に動作するようです。

JSON.parse（）を試しましたが、問題を解決していないようです。どんな助けもありがとう。

Answer 1

あなたは非同期プロセスとして何かを要求するが、データが入る前に、それをレンダリングすることを期待されている。

をデータが、私はあなたをお勧めします言われていること

if(!this.state.weatherdata){ 
    return null; 
} 
return(
    <div> 
     <Today temp={this.state.weatherdata.main.temp} 
       windSpeed={this.state.weatherdata.wind.speed} 
       windAngle={this.state.weatherdata.wind.deg} 
       icon={this.state.weatherdata.weather[0].icon} 
       iconID={this.state.weatherdata.weather[0].id} 
       iconDesc={this.state.weatherdata.weather[0].description} /> 
    </div> 
); 

になるまでnullを返してみてくださいgetメソッドを持つlodashのようなライブラリを使用してください。 JavaScriptのエラーを取り除くことで、コードの安定性が大幅に向上します。 getメソッドは変数をとり、その上のパスを検索します。

EX：

var test = {john: ['billy', 'bob']}; 
console.log(_.get(test, 'john[1]'); // prints 'bob' 
console.log(_.get(test, 'john[2]'); // prints 'undefined' 
console.log(_.get(test, 'john[2].something.somethingElse'); // prints 'undefined' 

これはあなたがlodashを使用した場合、それはどのようになるかです。

var weatherData = this.state.weatherdata; 
return(
    <div> 
     <Today temp={_.get(weatherData, 'main.temp')} 
       windSpeed={_.get(weatherData, 'wind.speed')} 
       windAngle={_.get(weatherData, 'wind.deg')} 
       icon={_.get(weatherData, 'weather[0].icon')} 
       iconID={_.get(weatherData, 'weather[0].id')} 
       iconDesc={_.get(weatherData, 'weather[0].description')} /> 
    </div> 
);