Redux:调用 action-creator 返回“无法读取未定义的属性‘道具’" [英] Redux: Call to action-creator returns 'Cannot read property 'props' of undefined'

问题描述

我能够获取给定城市的天气，但之后不知道如何删除它.作为 Redux 的新手，我试图弄清楚我在这个难题中遗漏了哪些部分.

I'm able to fetch the weather by a given city but can't figure how to delete it afterwards. Being still new to Redux I'm trying to figure which pieces am I missing on this puzzle.

我将保留 FETCH_WEATHER 代码仅用于上下文建议.我的问题与 DELETE_CITY 实现有关.

I'm leaving the FETCH_WEATHER code in just for context proposes. My issues is with the DELETE_CITY implementation.

错误:

步骤:

• 在每一行中添加一个调用动作创建者的按钮.

动作创建者采用城市"的名称并返回一个类型为DELETE_CITY"的动作.

Action creator takes the name of the 'city' and return an action of type 'DELETE_CITY'.

Reducer，监视该类型并遍历城市数组并删除具有给定城市名称的对象.

Reducer, watches for that type and iterates through the array of cities and deletes the object with the given city name.

动作创建者

import axios from 'axios';
const API_KEY = '1111111111111111111111';
const ROOT_URL = `http://api.openweathermap.org/data/2.5/forecast?appid=${API_KEY}`;

export const FETCH_WEATHER = 'FETCH_WEATHER';
export const DELETE_CITY = 'DELETE_CITY';

//fetch cities
export function fetchWeather(city){
    const url = `${ROOT_URL}&q=${city},&units=imperial`;
    const request = axios.get(url);
    console.log('Request:', request);

    return {
        type: FETCH_WEATHER,
        payload: request
    }
}

//Delete Cities
export function deleteCity(city) {
    return {
        type: DELETE_CITY,
        payload: city
    }
}

减速器:index.js

import { combineReducers } from 'redux';
import WeatherReducer from './reducer_weather';

const rootReducer = combineReducers({
  weather: WeatherReducer
});

export default rootReducer;

weather_reducer.js

DELETE_CITY 的情况是否准确实施?

import { FETCH_WEATHER } from '../actions/index';
import { DELETE_CITY } from '../actions/index';

export default function (state = [], action) {
    console.log('Action received', action);

    //only fetch weather data type
    switch (action.type) {
        case FETCH_WEATHER:
            //concat to prevent state mutation
            return state.concat([action.payload.data]);

        case DELETE_CITY:
            return state
                .slice(0, action.payload.data)
                .concat([action.payload.data].slice([action.payload.data] + 1));
    }
    return state;
}

• 在每一行中添加一个调用操作创建者的按钮.

Ps:mapStateToProps 和 mapDispatchToProps 是否正确?

weather_container.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Chart from '../components/chart';
import GoogleMap from '../components/google_map';
import { bindActionCreators } from 'redux';
import { deleteCity } from '../actions/index';

class WeatherList extends Component {

    renderWeather(cityData) {
        const name = cityData.city.name;

        return (
            <tr key={name}>
                <td><button onClick={() => this.props.deleteCity(cityData)} className="btn btn-danger">x</button></td>
            </tr>
        )
    }
    render() {
        return (
            <table>
                <thead>
                    <tr>
                        <th>City</th>
                    </tr>
                </thead>
                <tbody>
                {this.props.weather.map(this.renderWeather)}
                </tbody>
            </table>
        )
    }
}

 function mapStateToProps(state) {
     return {
         weather: state.weather
     }
 }

 function mapDispatchToProps(dispatch, weather) {
     return bindActionCreators({deleteCity},{weather}, dispatch)
 }

 export default connect(mapStateToProps, mapDispatchToProps)(WeatherList);

我需要将动作创建者绑定到 onClick 事件.我尝试了两种方法:粗箭头函数和/或将方法绑定到构造函数()内".

I need to bind the action creator to the onClick event. I tried both methods: fat arrow functions and/or 'binding the method inside of a constructor()'.

它们都返回未定义的 props.

They both return with props undefined.

推荐答案

尝试替换:

{this.props.weather.map(this.renderWeather)}

与

{this.props.weather.map(this.renderWeather, this)}

map<的第二个参数/code> 是 thisArg - 执行 callback 时用作 this 的值.

The second argument of map is the thisArg - value to use as this when executing callback.

这篇关于Redux:调用 action-creator 返回“无法读取未定义的属性‘道具’"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！