React 和 Redux 购物车，加入购物车动作

Question

我在 ReactJs 和 Redux 购物车工作。 问题是我添加到购物车中的商品在购物车中未定义并且未显示。
这是添加到购物车的操作：

export const addToCart = ( { item }) => {
    return (dispatch) => {
        return (
            dispatch({
                type: ADD_TO_CART,
                payload:
                { id: item?.id,
                  name: item?.name,
                  brand: item?.brand,
                  quantity: item?.quantity,
                 }
            })
        )
    }
}

推车减速机：

const initialState = {
    cart: [],
}

export default function addToCartReducer(state=initialState, action) {
    switch(action.type){
        case ADD_TO_CART:            
            return {
                ...state,
                cart:[...state.cart, { 
                    id: action.payload.id,
                    name: action.payload.name,
                    brand: action.payload.brand,
                    quantity: action.payload.quantity
                    }]
            };
            default:
            return state    
    }
} 

这是 MyComponent 的一个片段：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { addToCart } from '../Actions/actions'

export class MyComponent extends Component {
 render(){
  return(
    <section>
       <button onClick = {()=>this.props.addToCart(this.props.selectedItem)}
         ADD TO CART
       </button>
    </section>
const mapStateToProps = (state) => {
    return {
        selectedItem: filterAttributesSelector(state),
    }
}

export default connect(mapStateToProps, {addToCart})(MyComponent)
  )
 }
}

如果我登录到控制台this.props.selecteditem定义了所有键。 但是，如果我将一个项目添加到购物车并将其记录到控制台，则键是未定义的。
你能告诉我这是怎么回事吗？
谢谢 ！

Answer 1

您不能在退货中制作 mapStateToProps，它应该会导致错误您需要添加一个 mapDispatchToProps 以在您的情况下调度您的操作“addToCart”操作。 你的代码会是这样的

 import React, { Component } from 'react' import { connect } from 'react-redux' import { addToCart } from '../Actions/actions' export class MyComponent extends Component { render(){ return( <section> <button onClick={()=>this.props.addToCart(this.props.selectedItem)}> ADD TO CART </button> </section> ) } } const mapStateToProps = (state) => { return { selectedItem: filterAttributesSelector(state), } } const mapDispatchToProps = (dispatch) => { return { addToCart: (item) => dispatch(addToCart(item)), }; }; export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

** 由于您发送了该项目，因此无需在您的操作代码中销毁它应该是这样的

 export const addToCart = (item) => { return (dispatch) => { return ( dispatch({ type: ADD_TO_CART, payload: { id: item?.id, name: item?.name, brand: item?.brand, quantity: item?.quantity, } }) ) } }