Question

当触发onclick处理程序时，我只是尝试在列表中的每个项目上调用AddToCart，这只会将项目的数量减少1个单位。以下是相关代码：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { AddToCart } from '../actions/add_to_cart';

class ItemList extends Component {


  render() {
    return (
      <div>
        <ol>
          {this.props.itemList.map((item) =>
          <li key={item.id} >
            name: {item.name} ||
            price: ${item.price} ||
            Quantity: {item.quantity}
            <button
              onClick={() => this.props.AddToCart(item.id)}
              >Add To Cart
            </button>
          </li>
        )}
        </ol>
      </div>
    );
  }
}


function mapDispatchToProps (dispatch) {
  return bindActionCreators({ AddToCart }, dispatch);
}

function mapStateToProps(state) {
  return { itemList: state.itemList }
} 

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

这是动作创作者：

export const ADD_TO_CART = 'ADD_TO_CART';


export function addToCart(id) {
  return {
    type: ADD_TO_CART,
    id
  };
}

这是减速器：

import { ADD_TO_LIST } from '../actions/add_to_list';
import { ADD_TO_CART } from '../actions/add_to_cart';



export default function (state = [], action) {
  console.log('action recieved', action);
  switch (action.type) {
    case ADD_TO_LIST:
      console.log(state)
      return [
        ...state,
        { id: action.id, name: action.name, price: action.price, quantity: 10 }
  ]
    case ADD_TO_CART:
      return state.map((item) => {
        if(item.id === action.id){
          // return {...state, quantity: 0}
          return Object.assign({}, item, {quantity: item.quantity - 1})
        }
        return item
      })
    }
  return state;
  console.log(state);
}

被困在这上面的时间超过了我想分享的时间。任何帮助请!!

Answer 1

您正在导入AddToCart：

import { AddToCart } from '../actions/add_to_cart';

但您的功能名称是您的动作创建者中的addToCart。必须是：

import { addToCart } from '../actions/add_to_cart';

React / Redux：Uncaught TypeError：_this2.props.AddToCart不是函数..我一直收到这个错误，但我不知道出了什么问题

1 个答案: