Question

请注意，我没有找到类似职位的特定情况的答案。

我的应用程序允许用户获取城市的天气以及该天气的相关装箱单。

我想让每个城市的卡片都可以删除并放置一个“X”，它应该调用updateTerms动作创建者，然后将其从用户列表中删除并更新dom。

回调似乎触发，但 this.props.updateTerms 抛出** TypeError：无法读取null的属性'props' 在handleDeleteCard **

a_result_card.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import ATodoList from './a_Todo_List';
import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
import { bindActionCreators} from 'redux';
import { updateTerms } from '../actions';

class AResultCard extends Component {
    constructor(props) {
        super(props); 
        this.state = { cityName : '' }; 
        this.handleDeleteCard = this.handleDeleteCard.bind(this);
    }

    handleDeleteCard(event) { // I NEED TO CALL THIS WITH THE KEY
        //So THAT I CAN REMOVE IT FROM THE USERS TERM LIST
        event.preventDefault();
        debugger;
        this.props.updateTerms(cityName, "delete");
    }

    renderWeather(cityData) {
        function calcAverageTemp(days) {
            let reduced = days.reduce((sum,day) => {
               return sum + day.main.temp_max;
            }, 0);
            return Math.floor(reduced / cityData.list.length);
        };
        function calcAverageHumidity(days) {
            let reduced = days.reduce((sum,day) => {
               return sum + day.main.humidity;
            }, 0);
            return Math.floor(reduced / cityData.list.length);
        };
        const avgTempK = calcAverageTemp(cityData.list);
        const cityName = cityData.city.name;
        const avgTempF = Math.floor((avgTempK * 1.8) - 459.67 );
        const avgHumidity = calcAverageHumidity(cityData.list);

        return (
            <li key={cityName} className="result-card">
                <div className="card">
                    <div className="">
                        <div className="weather-details">
                            <div className="card-heading">
                                <span className="weather-detail detail-title">{cityName}</span>
                                <span className="weather-detail">{avgTempF} &#176;F</span>
                                <span className="weather-detail">H: {avgHumidity}%</span>
                                <span className="weather-detail delete-card-icon" onClick={handleDeleteCard}>X</span>
                            </div>
                        </div>
                        <ATodoList avgTempF={avgTempF} />
                    </div>
                </div>
            </li>
        );
    }


    render() {
        return (
            <ul className="results">
                <CSSTransitionGroup
                    transitionName="example"
                    transitionEnterTimeout={150}
                    transitionLeaveTimeout={150}>

                {this.props.weather.map(this.renderWeather)}
                </CSSTransitionGroup>
            </ul>
        );
    }
}

function mapStateToProps({weather, userTerms}) {
    return ({
            weather,
            userTerms
        });
}
function mapDispatchToProps(dispatch) {
  return bindActionCreators({ updateTerms }, dispatch);
}

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

Answer 1

您需要将handleDeleteCard功能称为

<span className="weather-detail delete-card-icon" onClick={this.handleDeleteCard}>X</span>

因为它属于React Component而非renderWeather函数

的上下文

还绑定renderWeather函数

renderWeather = (cityData) => {
    function calcAverageTemp(days) {
        let reduced = days.reduce((sum,day) => {
           return sum + day.main.temp_max;
        }, 0);
        return Math.floor(reduced / cityData.list.length);
    };
    function calcAverageHumidity(days) {
        let reduced = days.reduce((sum,day) => {
           return sum + day.main.humidity;
        }, 0);
        return Math.floor(reduced / cityData.list.length);
    };
    const avgTempK = calcAverageTemp(cityData.list);
    const cityName = cityData.city.name;
    const avgTempF = Math.floor((avgTempK * 1.8) - 459.67 );
    const avgHumidity = calcAverageHumidity(cityData.list);

    return (
        <li key={cityName} className="result-card">
            <div className="card">
                <div className="">
                    <div className="weather-details">
                        <div className="card-heading">
                            <span className="weather-detail detail-title">{cityName}</span>
                            <span className="weather-detail">{avgTempF} &#176;F</span>
                            <span className="weather-detail">H: {avgHumidity}%</span>
                            <span className="weather-detail delete-card-icon" onClick={this.handleDeleteCard}>X</span>
                        </div>
                    </div>
                    <ATodoList avgTempF={avgTempF} />
                </div>
            </div>
        </li>
    );
}

this.props.myActionCreator抛出'TypeError：无法读取null'属性'props'

1 个答案: