2016-10-14 1 views
0

私は外部APIから受信したJSONを解析しようとしています。reactxを使用して反応オブジェクトからデータを受信

私の減速がある:

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に他のコンポーネントが追加されている可能性があります

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

ありがとうございました

+0

私はあなたが見たいものを手に入れませんでしたか?あなたが試した '1'のコードページを投稿できますか?また、あなたは 'ショー 'したいと言いました。ショーでは、それをレンダリング方法でレンダリングしたいということですか? – Panther

+0

'const {forecast:{item:{現在:{要約}}}} = this.props'を試してから、レンダリングで' {summary || 'まだ利用可能なデータがありません'} 'または何か。 – steezeburger

+0

@steezeburgerあなたのアイデアに感謝します!私はそれを試して、同じエラーが表示されます。だから現在の評価まで、それは動作します。しかし、私が 'const {forecast:{item:{now}}} = this.props'を試してみると、' TypeError:undefinedはオブジェクトではありません(this.props.forecast.item.currently 'を評価する) 'なので、 'item'がオブジェクトとして認識されていないようですか?コンソールの中にはそれがあるように見えますが。だから、問題は減速機にあるかもしれないと思う。 – Olenka

答えて

0

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

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

ソリューション:

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

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

関連する問題