Redux 运行代码显示'；this.props.dispatch不是一个函数'；添加mapDispatchToProps后

让我告诉你，这段代码运行良好，在添加mapDispatchToProps后，在商店页面中显示所有产品。 it给定错误：-类型错误：this.props.getProducts不是函数

mapStateToProps正在提供产品。 正在尝试使用mapDispatchToProps发布数据

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getProducts } from '../actions/productsAction';
import { addToCart } from '../actions/cartAction';

class Shop extends Component {

  constructor(props) {
    super(props);

    this.state = {
      pid: '',
      pname: '',
      pprice: '',
      pimg: '',
      qty: '',
      total_price: '',
      getValue:[]
    };
  }   

  componentDidMount() {
    this.props.dispatch(getProducts());
    
    let getValue = localStorage.getItem("userData");     
    this.setState({ 
      getValue: JSON.parse(getValue), 
    });   
  }

  handleSubmit = (event) => {
    event.preventDefault();
    const pid = this.state.pid;
    const pname = this.state.pname;
    const pprice = this.state.pprice;
    const pimg = this.state.pimg;
    const qty = this.state.qty;
    const total_price = this.state.total_price;
    const email = this.state.getValue.email;
    const CartData = {pid: pid, pname: pname, pprice: pprice, pimg: pimg, qty:qty, total_price:total_price}
    this.props.addToCart(CartData);
  };

  render() {
      return (
      ...html code
      <form onSubmit={ this.handleSubmit }>
        <input type="hidden" onChange={this.handleChange} name="pid" value={product._id} />  
        <input type="hidden" onChange={this.handleChange} name="pname" value={product.pname} />  
        <input type="hidden" onChange={this.handleChange} name="pprice" value={product.pprice} />  
        <input type="hidden" onChange={this.handleChange} name="qty" value="1" />  
        <input type="hidden" onChange={this.handleChange} name="pimage" value={product.pimg} />
        <input type="hidden" onChange={this.handleChange} name="total_price" value={product.pprice} />
        <button type="submit" class="pro-btn"><i class="icon-basket"></i></button>
     </form>
     ...html code

const mapStateToProps = (state) => ({ products: state.products });

const mapDispatchToProps = { addToCart };

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

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“../actions/productsAction”导入{getProducts}；
从“../actions/cartAction”导入{addToCart}；
类商店扩展组件{
建造师（道具）{
超级（道具）；
此.state={
pid:“”，
pname:“”，
pprice:“”，
皮姆：“，
数量：''，
总价：''，
getValue:[]
};
}   
componentDidMount（）{
this.props.dispatch（getProducts（））；
让getValue=localStorage.getItem（“userData”）；
这个.setState（{
getValue:JSON.parse（getValue），
});   
}
handleSubmit=（事件）=>{
event.preventDefault（）；
const pid=this.state.pid；
const pname=this.state.pname；
const pprice=this.state.pprice；
const pimg=this.state.pimg；
常量数量=此状态数量；
const total_price=this.state.total_price；
const email=this.state.getValue.email；
const CartData={pid:pid，pname:pname，pprice:pprice，pimg:pimg，数量：数量，总价：总价}
this.props.addToCart（CartData）；
};
render（）{
返回(
…html代码
…html代码
const-mapStateToProps=（state）=>（{products:state.products}）；
常量mapDispatchToProps={addToCart}；
导出默认连接（mapStateToProps、mapDispatchToProps）（车间）；

您没有正确定义

mapDispatchToProps

它应该如下所示

const mapDispatchToProps = (dispatch) => { 
    return { 
        addToCart: () => dispatch(addToCart()),
        getProducts: () => dispatch(getProducts())
    }
};

您应该直接使用props调用函数

  componentDidMount() {
    this.props.getProducts();
    
    let getValue = localStorage.getItem("userData");     
    this.setState({ 
      getValue: JSON.parse(getValue), 
    });   
  }

---

您尚未正确定义

mapDispatchToProps

它应该如下所示

const mapDispatchToProps = (dispatch) => { 
    return { 
        addToCart: () => dispatch(addToCart()),
        getProducts: () => dispatch(getProducts())
    }
};

您应该直接使用props调用函数

  componentDidMount() {
    this.props.getProducts();
    
    let getValue = localStorage.getItem("userData");     
    this.setState({ 
      getValue: JSON.parse(getValue), 
    });   
  }

---

您有两个操作要在组件中使用，因此您希望将它们都包含在

mapDispatchToProps

对象中。@AmilaSenadheera描述的函数表示法将起作用，但更简单

const mapDispatchToProps = {
  addToCart,
  getProducts
};

---

然后，您应该能够调用

this.props.getProducts（）

您有两个操作要在组件中使用，因此您需要将它们都包含在

mapDispatchToProps

对象中。@AmilaSenadheera描述的函数表示法可以使用，但更简单

const mapDispatchToProps = {
  addToCart,
  getProducts
};

---

然后您应该能够调用

this.props.getProducts（）

他们正在使用。@LindaPaiste，谢谢你的帮助clarification@AmilaSenadheera谢谢你的回答，它正在工作。@Abhi，太好了！请把它作为答案。谢谢！他们正在使用。@LindaPaiste，谢谢你的回答clarification@AmilaSenadheera谢谢你的回答，它现在起作用了。@Abhi，太好了！请把它作为答案。谢谢！我对答案投了赞成票，它起作用了我对答案投了赞成票，它起作用了