无法在产品页面使用react redux将商品添加到购物车。

Question

我已经在产品列表页面列出了一些产品。我无法将产品添加到我的购物车中。在我的reducer代码中显示错误。以下是我的代码。

动作

export const addToCart= id =>({
type: ADD_TO_CART,
id

});

减速器代码

const initialState = {
    products: [{id:1,title:'Dell Inspiron 3581', discount: 10, price:110,img:Image1},
    {id:2,title:'Dell Vostro 3362', discount: 10, price:80,img: Image2},
    {id:3,title:'Acer TravelMate', discount: 0,price:120,img: Image3},
    {id:4,title:'Lenovo ideapad core', discount: 15, price:260,img:Image4},
    {id:5,title:'Lenovo V145', discount: 0, price:160,img: Image5},
    {id:6,title:'Asus Zephyrus G14', discount: 5 ,price:90,img: Image6}],
    filteredProducts:[],
    cartItems:[],
    total:0,
    cartCount: 0
  };

export default function productReducer(state = initialState, action){
     switch(action.type){

       case ADD_TO_CART:
      const { cartItems, products, cartCount,total } = state;

      let productToAdd = cartItems.find(item=>item.id===action.id);
      let count;
      if (!productToAdd) {
        productToAdd = products.find(obj => obj.id === action.id);
        count = 1;
      } else {
        count = productToAdd.count + 1;
      }
      const pid = productToAdd.id;
      const newCart = { ...state.cartItems, [pid]: { ...productToAdd, count } };
      const newcount = cartCount + 1; 
      const newTotal = total+productToAdd.price
      return { ...state, cartItems: newCart, cartCount: newcount,total:newTotal};

        default:
            return state;
     }
}

在这里，我正在做添加项目的计数，如果该产品已经存在于购物车中，那么增加该产品的数量。但是我得到了类型错误，因为空引用。

TypeError: 无法获取未定义或空引用的属性'id'。 ->(const pid = productToAdd.id)

这是我的产品组件页面。

    import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import {addToCart} from '../../action/cartAction';
import {Button} from 'react-bootstrap';

class ProductComponent extends Component{
    constructor(props){
        super(props);
        this.state ={
            radioSearch : '',
            filteredData: this.props.products
        }
    }
    handleClick = (id)=>{
        this.props.addToCart(id); 
    }
    /** some other handler **/
    render(){
        let itemList = this.state.filteredData.map(item=>{
            return(
                <div className="card" key={item.id}>
                        <div className="card-image">
                            <img src={item.img} alt={item.title}/>
                            <span className="card-title">{item.title}</span>
                        </div>

                        <div className="card-content">
                            <p><b>Discount: {item.discount}%</b></p>
                            <p><b>Price: {item.price}$</b></p> <Button variant="dark" onClick={()=>{this.handleClick(item.id)}}>ADD TO CART</Button>
                        </div>
                 </div>

            )
        })

        return(
            <div className="container">
                /** some other code **/
                <div className="box">
                    {itemList}
                </div>
            </div>
        )
    }
}
const mapStateToProps = (state)=>{
    return {
        products: state.productReducer.products
    }
  }
function mapDispatchToProps(dispatch) {
return bindActionCreators({
    addToCart
}, dispatch);

export default connect(mapStateToProps,mapDispatchToProps)(ProductComponent)

这里是我的汽车组件

import React, { Component } from 'react';
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import {removeFromCart} from '../../action/cartAction';

class cartComponent extends Component {
    handleRemove(id){
        this.props.removeFromCart(id);
    }
    render() {
        console.log(this.props.cartItems.length);
        let cartProducts = this.props.cartItems.length ?
        (
            this.props.cart.map(item=>{
                return(

                    <li className="collection-item avatar" key={item.id}>
                                <div className="item-img"> 
                                    <img src={item.img} alt={item.img} className=""/>
                                </div>

                                <div className="item-desc">
                                    <span className="title">{item.title}</span>
                                    <p>{item.desc}</p>
                                    <p><b>Price: {item.price}$</b></p> 
                                    <p>
                                        <b>Quantity: {item.quantity}</b> 
                                    </p>
                                    <button className="waves-effect waves-light btn pink remove" onClick={()=>{this.handleRemove(item.id)}}>Remove</button>
                                </div>

                            </li>

                )
            })
        ):
        (
            <p>Your cart is empty</p>
        )
        return(
            <div className="container">
                <div className="cart">
                <h5>You have ordered:</h5>
                    <ul className="collection">
                        {cartProducts}
                    </ul>
                </div>
            </div>
        )
    }
}

function mapStateToProps(state) {
    return {
        cartItems : state.productReducer.cartItems
    }
}

function mapActionsToProps(dispatch) {
    return bindActionCreators({
        removeFromCart
    }, dispatch);
}


export default connect(mapStateToProps,mapActionsToProps)(cartComponent);

我尝试了很多东西，但它不能将产品添加到购物车中，有什么需要修改的地方使其工作？

这是我的源代码。 源代码

Answer 1

看起来你将动作映射到道具的方式与函数的实际用法不一致。

你是这样映射的。

addToCart: (id)=>{dispatch(addToCart(id))}

动作只是把它的参数作为 payload 意思 payload 等于 id:

export const addToCart= payload =>({
  type: ADD_TO_CART,
  payload
});

但你希望有效载荷是这样的对象。

const { id } = action.payload;

你需要让它们匹配。要么把动作传给一个对象。

addToCart: (id)=>{dispatch(addToCart({id}))}

或者使用payload作为id

const id = action.payload;

这段代码的结果是： id 是未定义的，意味着没有 productToAdd.