2016-10-14 2 views
0

Я пытаюсь разобрать json, полученный от внешнего api.получать данные от объекта реакции, используя redux

Мой редуктор:

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} 

Итак, мой вопрос в том, как я могу показать значение, скажем прогноз.currently.summary?

1) Если я просто пытаюсь вставить его в {} Я получаю: «TypeError: не определено не является объектом (оценка„forecast.currently“)»

2) Я не могу использовать отображение как json может иметь добавленные другие компоненты

Есть ли способ получить это свойство напрямую, без отображения всего файла?

Благодаря

+0

Я не получил то, что вы хотите показать? Можете ли вы отправить код pices для '1', который вы попробовали. Также вы упомянули, что хотите «показать». По показанию вы имеете в виду, что хотите визуализировать его в методе рендеринга? – Panther

+0

Вы можете попробовать 'const {прогноз: {item: {в настоящее время: {summary}}}} = this.props', а затем в render do' {summary || 'пока нет данных'} 'или что-то. – steezeburger

+0

@steezeburger благодарит за вашу идею! Я попробовал и получил ту же ошибку. Таким образом, до оценки в настоящее время он работает. Но когда я пытаюсь 'const {прогноз: {item: {в настоящее время}}} = 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> 
) 
} 
} 

Таким образом, вы убедитесь, что у вас уже есть данные, и если нет, то вы показываете что-то полезное.

Смежные вопросы