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

Posted 2023-02-22

【中文标题】this.props.myActionCreator 抛出\'TypeError：无法读取属性\'props\' of null\'

【英文标题】：this.props.myActionCreator throws 'TypeError: Cannot read property 'props' of null'this.props.myActionCreator 抛出'TypeError：无法读取属性'props' of null'

【发布时间】：2017-10-29 19:40:28

【问题描述】：

顺便提一下，我在类似的帖子中没有找到针对我的特殊情况的答案。

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

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

回调似乎触发了，但是 this.props.updateTerms 抛出 **TypeError: Cannot read property 'props' of null 在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);

【问题讨论】：

你能试试这样调用onClick函数吗-onClick = this.handleDeleteCard

这是解决方案的一部分，谢谢。 :)

【参考方案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>
    );

【讨论】：

您的解决方案有效。我忘记了使用箭头运算符处理范围的方式不同。谢谢！

顺便说一下，我想将 cityName 传递给动作创建者，但它目前是在 renderWeather 内部生成的。如果您对更好地组织我的数据有任何想法，我愿意接受建议。 :)