子コンポーネントから状態にアクセスできない

Question

天気予報アプリケーションを構築しようとしています。

getInitialState: function() { 
    return {text: '', weather: null}; 
    }, 
    handleClick: function() { 
    WeatherApi.get('q=' + this.state.text).then(function(data) { 
     this.setState({weather: data}) 
    }.bind(this)); 
    }, 

は私がやりたいことは、それに一度の子componenetに天候プロップの状態を渡すことです：私は、APIを介してデータを取得し、最初はnullです天候プロップの状態を設定し、検索バーのコンポーネントを持っていますユーザーによって設定されます：

<TodaysWeatherContainer weatherData={this.state.weather} /> 

次に、このようなコンポーネントからアクセスされることを：今、私は街を検索したとき、私は次のエラーを取得する

var TodaysWeatherContainer = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <p>{this.props.weatherData}</p> 
     </div> 
    ); 
    } 
}); 

：

未知（未定）エラー：オブジェクトはリアクションの子として有効ではありません（見つかったキー：{city、cod、message、cnt、list}のオブジェクト）。子コレクションをレンダリングする場合は、代わりに配列を使用するか、ReactアドオンのcreateFragment（オブジェクト）を使用してオブジェクトをラップします。レンダリング方法がTodaysWeatherContainerであることを確認します。

キャッチされない例外TypeError：：私が追加した場合

は{this.props.weatherData.cityは}私はこのエラーを取得するヌル

のプロパティ「都市」を読み取ることができません私は混乱しそうだところです。 this.props.weatherDataでオブジェクトが返されている場合、どのようにnullになるのですか？

Answer 1

AJAXリクエストによって返されるデータは、テキスト（それらの間の有効な子ノードである）だけでなく、無効な子オブジェクトです。

状態のweatherプロパティを、オブジェクト全体ではなくAPIレスポンスによって返されるオブジェクトのプロパティに設定します。

最新のコメントに応じて、weatherData.city自体が解析する必要があるオブジェクトです。おそらく、私たちが知り得ないAPIをよりよく研究することで、この問題を自分で解決することができます。

コメントで@deowkが指摘したように、2番目のエラーは親コンポーネントの初期状態である{weather: null}に起因しています。子コンポーネントが最初にレンダリングされたときに、nullオブジェクトのcityプロパティを検索しようとしました。子コンポーネント自体ではなく、APIコールバックでルックアップを実行しているため、エラーは表示されなくなりました。