Блог

Главная - Вопросы по программированию - получать данные из объекта react, используя redux

получать данные из объекта react, используя redux

#json #reactjs #redux #react-redux

#json #reactjs #redux #react-redux

Вопрос:

Я пытаюсь проанализировать json, полученный из внешнего api.

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

 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}

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

1) Если я просто попытаюсь вставить его в {} Я получаю: ‘Ошибка типа: неопределенный не является объектом (оценка ‘forecast.currently’)’

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

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

Спасибо

Комментарии:

1. Я не понял, что вы хотите показать? Можете ли вы опубликовать фрагменты кода, для 1 которых вы пытались. Также вы упомянули, что хотите show . Под show вы подразумеваете, что хотите отобразить его в методе render?

2. Вы могли бы попробовать const { forecast: { item: { currently: { summary } } } } = this.props , а затем выполнить рендеринг { summary || 'no data available yet' } или что-то в этом роде.

3. @steezeburger большое спасибо за вашу идею! Я попробовал и получил ту же ошибку. Итак, до оценки текущего момента это работает. Но когда я пытаюсь const { forecast: { item: {currently} } } = this.props , я получаю TypeError: undefined is not an object (evaluating 'this.props.forecast.item.currently') , так что, похоже item , он не распознается как объект? Хотя в консоли это выглядит так, как есть. Так что, я думаю, проблема может быть в редукторе..

Ответ №1:

Проблема, с которой вы сталкиваетесь, заключается в том, что вы запрашиваете данные. Это не завершается немедленно. Подумайте о том, что делает приложение, пока вы ждете поступления данных о погоде.

Он что-то отображает. В вашем случае метод рендеринга не выполняется, потому что вы пытаетесь отобразить данные, которые еще не поступили.

Решение:

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

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

Метки: