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

Question

只是提及，我没有找到我在类似帖子上的特定情况的答案。

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

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

回调似乎火，但this.props.updateTerms抛出**类型错误：在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> 

因为它b elongs到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> 
    ); 
}