时间戳

首页 > 解决方案 > 添加 mapDispatchToProps 后运行代码显示“this.props.dispatch is not a function”

redux - 添加 mapDispatchToProps 后运行代码显示“this.props.dispatch is not a function”

问题描述

让我告诉你，这段代码工作正常，并在商店页面中显示所有产品，但在添加mapDispatchToProps之后。它给出错误：- TypeError：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);

标签： redux

解决方案

您有两个要在组件中使用的操作，因此您需要将它们都包含在您的mapDispatchToProps对象中。@AmilaSenadheera 描述的函数符号可以使用，但对象简写更容易。

const mapDispatchToProps = {
  addToCart,
  getProducts
};

那你应该可以打电话了this.props.getProducts()。

推荐阅读