使用 redux 从反应对象接收数据答案

【问题标题】：receive data from react object, using redux使用 redux 从反应对象接收数据
【发布时间】：2016-10-14 00:59:23
【问题描述】：

我正在尝试解析从外部 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}

所以，我的问题是，我怎样才能显示的价值，比如说 forecast.currently.summary？

1) 如果我只是尝试在 {} 中插入它，我会收到：'TypeError: undefined is not an object (evalating 'forecast.currently')'

2) 我不能使用映射，因为 json 可能添加了其他组件

有没有什么方法可以直接获取到这个属性，而不用映射所有文件？

谢谢

【问题讨论】：

我没有得到您想要显示的内容？您可以发布您尝试过的1 的代码图片吗？你还提到你想show。显示你的意思是你想在渲染方法中渲染它？
你可以试试const { forecast: { item: { currently: { summary } } } } = this.props 然后在渲染中做{ summary || 'no data available yet' } 什么的。
@steezeburger 非常感谢您的想法！我试过了，收到同样的错误。因此，就目前的评估而言，它是有效的。但是当我尝试const { forecast: { item: {currently} } } = this.props 时，我收到TypeError: undefined is not an object (evaluating 'this.props.forecast.item.currently')，所以看起来item 没有被识别为对象？虽然在控制台中看起来是这样。所以我想，问题可能出在减速器上..

标签： json reactjs redux react-redux

【解决方案1】：

您遇到的问题是您正在请求数据。这不会立即完成。在您等待天气数据到达时，想想应用程序在做什么。

它正在显示一些东西。在您的情况下，渲染方法失败，因为您试图显示尚未到达的数据。

解决办法：

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

通过这种方式，您可以检查您是否已经拥有数据，如果没有，您将展示一些有用的信息。

【讨论】：