Как обновить количество товара для идентификатора, уже есть в корзине . когда я добавляю в корзину, она полностью обновляется и добавляется новое количество

#reactjs #redux #cart

Вопрос:

это часть редуктора

 import {CART_ADD_ITEMS,CART_REMOVE_ITEMS} from '../constants/cartConstants'

export const cartReducers=(state={cartItems:[]},action)=>{
    switch(action.type){
        case CART_ADD_ITEMS:
            const item=action.payload
            const existItem=state.cartItems.find(x=>x.product === item.product )

            if(existItem){
                return{
                    ...state,
                    cartItems:state.cartItems.map(x=>x.product === existItem.product ? item :x)
                }
            }else{
                return{
                    ...state,
                    cartItems:[...state.cartItems,item]
                }
            }
            
        default:
            return state
    }
 

// это тележка.

 import {CART_ADD_ITEMS,CART_REMOVE_ITEMS} from '../constants/cartConstants'
import axios from 'axios'

export const addToCart=(id,qty)=>async(dispatch,getState)=>{
    const {data} = await axios.get(`/api/products/${id}`)

    dispatch({
        type: CART_ADD_ITEMS,
        payload: {
          product: data._id,
          name: data.name,
          image: data.image,
          price: data.price,
          countInStock: data.countInStock,
          qty,
        },
      })
    
      localStorage.setItem('cartItems', JSON.stringify(getState().cart.cartItems))
}
 

Комментарии:

1. Похоже, что количество является частью полезной нагрузки, которую вы заменяете в состоянии. Можете ли вы уточнить, в чем заключается проблема? Что работает не так, как ожидалось?

Ответ №1:

Строка, которую вам нужно изменить, вот эта:

 cartItems: state.cartItems.map((x) => x.product === existItem.product ? item : x)
 

Вы говорите: «Если этот элемент соответствует тому, который я добавляю, замените его тем, который я добавляю».

Вместо того, чтобы заменить его, мы хотим объединить эти две величины.

 cartItems: state.cartItems.map((x) =>
  x.product === existItem.product ? {
    // copy all other properties
    ...x,
    // add the quantity from the payload to the current quantity
    qty: x.qty   item.qty
  } : x
)