Redux：调用动作创建者返回“无法读取未定义的属性'props'”

Question

我可以按给定的城市获取天气，但无法弄清楚以后如何删除。 还是Redux的新手，我想弄清楚这个难题中我缺少哪些部分。

我仅将FETCH_WEATHER代码留给上下文建议。 我的问题是关于DELETE_CITY实现。

错误：

脚步：

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

• 动作创建者使用“城市”的名称，并返回类型为“ DELETE_CITY”的动作。

• Reducer会监视该类型，并迭代城市数组，并删除具有给定城市名称的对象。

动作创造者

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事件。 我尝试了两种方法：胖箭头函数和/或“将方法绑定到builder（）内部”。

他们都带着未定义的道具返回。

Answer 1

尝试更换：

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

用

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

map的第二个参数是thisArg值，在执行callback时将用作this值。

Answer 2

您需要绑定renderWeather函数。

class WeatherList extends Component {
    constructor(){
        super();
        this.renderWeather = this.renderWeather.bind(this);
    }
    ...
}

Answer 3

您收到的错误消息cannot read property props of undefined this.props this意味着在this.props this是未定义的。

这是反应中的常见陷阱，主要是因为这不在上下文范围内。

您需要做的是将renderWeather函数绑定到构造函数中的WeatherList

constructor() {
   this.renderWeather = this.renderWeather.bind(this)
}

另一种选择是使用箭头功能

class {
   renderWeather = (weatherData) => {
       ...
   }
   ...
}

删除城市时，您可能还会在减速器中考虑此实现。

[...state].filter((weather) => {
    return weather.id != action.payload.data.id
})

.filter()返回满足给定条件的新项目数组