Javascript 无法使用react redux从产品页面向购物车添加项目

我在产品列表页面列出了一些产品。我无法在购物车中添加产品。它在我的代码中显示错误。这是我的密码

行动

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）

这是我的productcomponent页面：

    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}来自'React'；
从'react redux'导入{connect}；
从“redux”导入{bindActionCreators}；
从“../../action/cartAction”导入{addToCart}；
从“react bootstrap”导入{Button}；
类ProductComponent扩展了组件{
建造师（道具）{
超级（道具）；
这个州={
无线电搜索：''，
Filteredata:this.props.products
}
}
handleClick=（id）=>{
this.props.addToCart（id）；
}
/**其他的处理者**/
render（）{
让itemList=this.state.filteredData.map（项=>{
返回(
{item.title}
折扣：{item.Discount}%

价格：{item.Price}$
{this.handleClick（item.id）}}>添加到购物车
)
})
返回(
/**其他代码**/
{itemList}
)
}
}
常量mapStateToProps=（状态）=>{
返回{
产品：state.productReducer.products
}
}
功能图DispatchToprops（调度）{
返回bindActionCreators({
addToCart
}，派遣）；
导出默认连接（mapStateToProps、mapDispatchToProps）（ProductComponent）

这是我的cartcomponent

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);

import React，{Component}来自'React'；
从“react redux”导入{connect}
从“redux”导入{bindActionCreators}
从“../../action/cartAction”导入{removeFromCart}；
类组件扩展组件{
handleRemove（id）{
此.props.removeFromCart（id）；
}
render（）{
log（this.props.cartItems.length）；
让cartProducts=this.props.cartItems.length？
(
this.props.cart.map（项目=>{
返回(

{item.title}
{item.desc}

价格：{item.Price}$


数量：{item.Quantity}

{this.handleRemove（item.id）}>Remove

)
})
):
(
你的车是空的

)
返回(
您已订购：

{cartProducts}

)
}
}
函数MapStateTops（状态）{
返回{
cartItems:state.productReducer.cartItems
}
}
函数mapActionsToProps（调度）{
返回bindActionCreators({
从购物车上取下
}，派遣）；
}
导出默认连接（MapStateTrops、mapActionsToProps）（cartComponent）；

我尝试了很多东西，但它并没有将产品添加到购物车中。需要做哪些更改才能使其正常工作

这是我的源代码：

---

您将动作映射到道具的方式似乎与该功能的实际使用不匹配

您可以这样映射它：

addToCart：（id）=>{dispatch（addToCart（id））}

该操作只是将其参数作为

有效载荷

传递，这意味着

有效载荷

等于

id

：

export const addToCart=payload=>({
类型：将\添加到\购物车，
有效载荷
});

但您希望有效负载是这样一个对象：

const{id}=action.payload；

你需要让他们匹配。将操作传递给对象：

addToCart:（id）=>{dispatch（addToCart（{id}））}

或者使用有效负载作为id：

const id=action.payload；

---

按原样编码的结果是，

id

未定义，这意味着没有

productToAdd

感谢您的建议。我已经编辑了代码。现在，我并没有得到那个类型的错误，但它并没有添加到购物车的项目仍然。。在购物车页面中，它显示为空。您映射的是购物车而不是购物车项目。我已更改了该设置，但它仍然没有添加。消息显示的购物车为空。我正在更新codesandbox中的代码。