reactxを使用して反応オブジェクトからデータを受信

Question

私は外部APIから受信したJSONを解析しようとしています。

私の減速がある：

import { RECEIVED_FORECAST } from '../actions/index'; 
export default function ForecastReducer (state = [], action) { 

switch (action.type) { 
    case RECEIVED_FORECAST: 
    return Object.assign({}, state, { 
     item: action.forecast 
    }) 
    default: 
    return state; 
    } 
} 

次にメイン減速は次のようになります：

import { combineReducers } from 'redux'; 
import ForecastReducer from './forecast_reducer'; 

const rootReducer = combineReducers({ 
    forecast: ForecastReducer 
}); 

export default rootReducer; 

とコンテナの

import React, { PropTypes, Component } from 'react'; 
import { connect } from 'react-redux'; 

class WeatherResult extends Component { 

render() { 
    const forecast = this.props.forecast.item; 
    {console.log('almost: ', forecast)} 
    return (
    <div> 
     <h1> </h1> 
    </div> 
) 
} 
} 

function mapStateToProps({ forecast }) { 
    return { 
    forecast 
    } 
} 

export default connect(mapStateToProps)(WeatherResult) 

出力はほとんどまったく同じ息子であるように見えます私が想定した通り：

almost: 
    Object 

    currently: {time: 1476406181, summary: "Drizzle", icon: "rain", nearestStormDistance: 0, precipIntensity: 0.0048, …} 

    daily: {summary: "Light rain on Saturday and Thursday, with temperatures rising to 92°F on Wednesday.", icon: "rain", data: Array} 

私の質問は、どのように私は、予測の現在のsummaryと言ってみましょうか？

1）私は私が受信{}内に挿入しようとした場合：私はマッピングを使用することができない）

2「『）forecast.currently：』例外TypeError未定義は（評価対象ではありません」 jsonに他のコンポーネントが追加されている可能性があります

すべてのファイルをマッピングせずにこのプロパティに直接アクセスする方法はありますか？

ありがとうございました

Answer 1

問題はあなたがデータを要求していることです。それはすぐには完了しません。気象データが到着するのを待っている間、アプリが何をしているのかを考えてください。

これは何かを表示しています。あなたの場合、まだ到着していないデータを表示しようとしているので、レンダリングメソッドが失敗しています。

ソリューション：

render() { 
    const forecast = this.props.forecast; 
    const text = forecast && forecast.item.currently.summary || 'loading...'; 
    return (
    <div> 
     <h1>{text}</h1> 
    </div> 
) 
} 
} 

この方法ですでにデータを持っているかどうかをチェックしていない場合は、あなたが何か役に立つを示しています。