Question

编辑：我已经改变了我的回归物体，但我仍然得到空道具。

mapStateToProps(state)的console.log显示温度为空。我假设我恢复了一个未改变的状态，我的axios呼叫的温度没有返回到我的weatherPage.js。

我的整个环境工作正常，我只是试图让axios得到请求。

在保持propTypes验证方法并尝试使用Object.assign()（这是正如丹·阿布拉莫夫所指出的那样，用一个深层复制来改变国家的正确方法。）

错误：

我的道具是空的。我在 src/actions/weatherActions.js 中拨打的axios电话未显示为 prop.weatherDetails.temperature 中的src/components/weatherPage.js ，它返回我的默认状态。

我是ES6和Redux的新手，我已将propTypes包含在我的页面中，我对此有点疑问，我认为问题来自提供正确的状态来自行动。
按下选择按钮时，我应该收到temp_c（axios呼叫 this json ）

的src /组件/ weatherPage.js

import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import {withRouter} from 'react-router';
import * as WeatherActions from '../../actions/weatherActions';

class WeatherPage extends React.Component {

    render() {
        return (
            <div>
                <h2>temps: {this.props.weatherDetails.temperature}</h2>
                <input
                    type="submit"
                    onClick={this.onClickSave.bind(this)}
                    value="CHOOSE"/>
            </div>
        );
    }
    onClickSave() {
        WeatherActions.getWeather(this.props.dispatch);
    }


WeatherPage.propTypes = {
    weatherDetails: PropTypes.object.isRequired,
    dispatch: PropTypes.func.isRequired

};


function mapStateToProps(state) {
    return {
        weatherDetails: state.weathers.weatherDetails
    };
}

export default connect(mapStateToProps)(withRouter(WeatherPage));

由于this.props.weatherDetails.temperature显示我当前的状态，我知道操作和减速器之间存在问题。

的src /动作/ weatherActions.js

import axios from 'axios';

export const ActionTypes = {
    WEATHER: { LOAD_WEATHER: 'WEATHER.LOAD_WEATHER' } };

export function getWeather(dispatch) {
    console.log('in getWeather method');
    console.log('this is getWeather dispatch: ', dispatch);

    axios({
        url: 'http://api.weatherunlocked.com/api/trigger/32.08,34.78/current%20temperature%20gt%2016%20includecurrent?app_id=ba2f68f0&app_key=0356747cc4d1d4ba0dd5cc25a0c86743',
            method: 'get'
            }).then(function (response) {
                //console.log('in the then func with this res: ',  JSON.stringify(response));
                dispatch({
                    type: ActionTypes.WEATHER.LOAD_WEATHER,
                    temperature: response.CurrentWeather.temp_c
                },
                    function () {
                    console.log('dispatch completed');

                    });
            });
    console.log('end of class getWeather');

我正在执行一个简单的axios呼叫，但我不确定我是否要发送＆＃39; （{{1} }）正确地通过reducer出现并返回视图。

这是我的减速机：

的src /减速器/ weatherReducer.js

temperature: response.CurrentWeather.temp_c

我在这个版本中缺少什么？

Answer 1

您必须将状态对象作为对象返回，而不是像reducer这样的数组返回

switch (action.type) {
        case WeatherActions.ActionTypes.WEATHER.LOAD_WEATHER:
            return  Object.assign({}, state, action.temperature.data);
        default:
            return state;
    }

React-Redux - 无法在视图页面上显示道具

1 个答案: