时间戳

首页 > 解决方案 > TypeError：this.props.decrementCount 不是函数

reactjs - TypeError：this.props.decrementCount 不是函数

问题描述

我正在尝试制作一个简单的购物车柜台，但收到此错误。我很困惑 mapStateToDispatch 是否有效。导入所有模块，功能正常，但当我点击添加，删除按钮时只得到这个错误

import React,{Component} from 'react';
import './cart.css';
import {product,product1} from './product.js'
import 'bootstrap/dist/css/bootstrap.min.css';
import {incrementCount , decrementCount} from './actions/buttonBehave';
import {connect} from 'react-redux';
import { bindActionCreators } from 'redux'

export class Cart extends Component{
    state = {
        buttonClicked : false
    }
    handleButton= () =>{
        this.setState({
            buttonClicked : true
        })
    }
    render()
    {
        return(
    <div className="cardDiv">
        <div className="card" >
           <img className="card-img-top" src={product.image} alt="Card image" height="350px" />
          <div className="card-body">
            <h4 className="card-title">{product.name}</h4>
            <p className="card-text">Model : {product.modelName}</p>
             <p className="card-text">Price : {product.price}</p>
            <a href="#" className="btn btn-primary " onClick={this.handleButton.bind(this)}> {this.state.buttonClicked ? "Add another" : "Add to cart"} </a>
            <p className="card-text">Added : {this.props.count}</p> 
            <button onClick = { () => this.props.incrementCount ()}>Remove</button>
             <button onClick = { () => this.props.decrementCount()}>ADD</button>

             <p className="card-text">{this.props.count}</p> 
        </div>
        </div>
    </div>

 );
    }
}

const mapStateToProps= (state) =>{
      return{
            count : state.count
  }
}

const mapDispatchToProps = () => {
  return {
   incrementCount,
    decrementCount
  }
}
export default connect(mapStateToProps,mapDispatchToProps())(Cart);

标签： reactjsreduxreact-redux

解决方案

您正在调用该函数而不是传递它的引用

export default connect(mapStateToProps,mapDispatchToProps())(Cart);
// ------------------------------------------------------^^--------

改成这个

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

另一种选择是根本不使用mapDispatchToProps并使用您连接的组件接收的调度

export default connect(mapStateToProps)(Cart);

然后使用调度

this.props.dispatch(decrementCount())

推荐阅读