Javascript 如何创建引用单个产品数量的特定React或Redux状态？

因此，我的应用程序中有一个购物车，每当我单击

addtocart

按钮时，我都需要增加购物车中X个特定项目的数量

因此，假设我的购物车中有一台笔记本电脑，数量为1（意味着我将购买一台），每当我在同一产品上单击“添加到购物车”时，我希望数量增加到2。我已经能够做到这一点，但是，由于我将数量保留在Redux商店中，它会同时增加购物车中每个商品的数量

请看下图：

如上图所示，每个产品的“Cantidad”（英文数量）为4，因为它来自Redux中的相同状态项

以下是

购物车
代码：

import { StyledButton } from './styles'
import Badge from '@material-ui/core/Badge'
import Drawer from '@material-ui/core/Drawer'
import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart'
import { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { productReducer } from '../../store/productReducer'

export const Cart = function({quantity}) {
  const [openCart, setOpenCart] = useState(false)
  const dispatch = useDispatch()
  
  const { cart, total, amount } = useSelector(({productReducer}) => ({
    cart: productReducer.cart,
    total: productReducer.total,
    amount: productReducer.amount,
  }))

  // const handler = window.ePayco.checkout.configure({
  //   key: process.env.REACT_APP_EPAYCO_PUBLIC_KEY,
  //   test: true
  // })

  const data = {
    external: 'false',
    autoclick: 'false',

    amount: total,
  }
  
  const getTotalPrice = (cartItem, amount) => {
    return cartItem.reduce((ack, cv) => {
      const totalPrice = ack + (cv.price * amount)
      return totalPrice
    }, 0)
  }

  return(
    <>
      <StyledButton onClick={() => setOpenCart(true)}>
        <Badge color='error'>
          <AddShoppingCartIcon />
        </Badge>
      </StyledButton>
      <Drawer
        anchor='right'
        open={openCart}
        onClose={() => setOpenCart(false)}
      >
        <h3>Productos en tu carrito</h3>
        <p>Total de tu carrito: {getTotalPrice(cart, amount)}</p>
        {!!cart && cart.length > 0 && cart.map(product => 
          <section key={product._id} >
            <h3>Productos en tu carrito</h3>
            <img src={product.productPictures} /> 
            <p>price={product.price * amount}</p> 
            <p>prodname={product.name}</p>
            <p>Cantidad:{quantity}</p>
          </section>
        )}
      </Drawer>
    </>
  )
} 

编辑：根据建议，我在下面添加
减速机
代码：

const CHANGE_PRODUCTS = 'CHANGE_PRODUCTS'
const ADD_TO_CART = 'ADD_TO_CART'
const CHANGE_AMOUNT = 'CHANGE_AMOUNT'
const CHANGE_TOTAL = 'CHANGE_TOTAL'

export function changeTotal(value) {
  return {
    type: CHANGE_TOTAL,
    payload: value,
  }
}

export function changeAmount(value) {
  return {
    type: CHANGE_AMOUNT,
    payload: value,
  }
}

export function changeProducts(value) {
  return {
    type: CHANGE_PRODUCTS,
    payload: value,
  }
}

export function addToCart(value) {
  return {
    type: ADD_TO_CART,
    payload: value,
  }
}
const initialSate = {
  products: {},
  cart: [],
  amount: 0,
  total: 0,
}

export function productReducer(state = initialSate, action) {
  switch(action.type) {
    case CHANGE_PRODUCTS:
      return {
        ...state,
        products: action.payload,
      }
    case ADD_TO_CART:
      return {
        ...state,
        cart: [
          ...state.cart,
          action.payload
        ]
      }
    case CHANGE_AMOUNT:
      return {
        ...state,
        amount: action.payload,
      }
    case CHANGE_TOTAL:
      return {
        ...state,
        total: action.payload,
      }
    default:
      return state
  }
}

因此，我需要知道的是关于如何使
数量
状态项独立的想法，以便它根据您添加到
购物车
问题的产品进行更改
changeamunt
正在更改一个“全局”金额值，它看起来更像是一个项目总数，而不是其他任何东西

解决方案
amount
和
total
似乎是派生状态，因此应该在更新
购物车时计算它们。我建议您只需使用
addToCart
操作添加产品，并将确定产品是否已在购物车中的逻辑移动到减速机中。创建一个“cartItem”对象以保存产品详细信息和数量

更新reducer函数

const initialSate = {
  products: {},
  cart: [],
  total: 0,
}

export function productReducer(state = initialSate, action) {
  switch(action.type) {
    case CHANGE_PRODUCTS:
      return {
        ...state,
        products: action.payload,
      }
    case ADD_TO_CART:
      const item = action.payload;
      const isInCart = state.cart.some(({ id }) => id === item.id);

      let nextCart;
      if (isInCart) {
        nextCart = state.cart.map(cartItem => cartItem.id === item.id ? {
          ...cartItem,
          quantity: cartItem.quantity + 1,
        } : cartItem);
      } else {
        nextCart = [...state.cart, { ...item, quantity: 1 }];
      }
      return {
        ...state,
        cart: nextCart,
        total: nextCart.reduce((total, { price, quantity }) => total + price * quantity, 0),
      }
    default:
      return state
  }
}

现在您有了一个购物车状态，其中包括产品详细信息和数量，因此不需要
金额
状态

在映射
购物车
中的
购物车
状态而不是传递的
数量
属性（也不再相关）时，相应地调整UI以显示项目数量

{！！cart&&cart.length>0&&cart.map（产品=>
卡里托产品
价格={product.price*product.quantity}
//您应该对产品发送
addToCart
操作，并处理将商品添加到购物车中，或者如果商品已经在购物车中，则简单地增加其状态下的数量。您可以将减速机代码添加到您的问题中吗？如果您坚持执行
changeamum
操作，那么它可能也会消耗产品t id，以便您可以确定哪些特定产品需要更新数量。您好，感谢您的评论：D.我现在正在添加减速机代码。我不坚持执行
更改数量
操作。这只是我第一次这样做，然后我意识到它将由所有产品共享。我还意识到我不能使用状态，是吗因为无论我做什么，它都会被分享。我对这一点还不熟悉，所以我想知道是否有一种不同的方法可以使用。
const initialSate = {
  products: {},
  cart: [],
  total: 0,
}

export function productReducer(state = initialSate, action) {
  switch(action.type) {
    case CHANGE_PRODUCTS:
      return {
        ...state,
        products: action.payload,
      }
    case ADD_TO_CART:
      const item = action.payload;
      const isInCart = state.cart.some(({ id }) => id === item.id);

      let nextCart;
      if (isInCart) {
        nextCart = state.cart.map(cartItem => cartItem.id === item.id ? {
          ...cartItem,
          quantity: cartItem.quantity + 1,
        } : cartItem);
      } else {
        nextCart = [...state.cart, { ...item, quantity: 1 }];
      }
      return {
        ...state,
        cart: nextCart,
        total: nextCart.reduce((total, { price, quantity }) => total + price * quantity, 0),
      }
    default:
      return state
  }
}

{!!cart && cart.length > 0 && cart.map(product => 
  <section key={product._id} >
    <h3>Productos en tu carrito</h3>
    <img src={product.productPictures} /> 
    <p>price={product.price * product.quantity}</p> // <-- update price computation
    <p>prodname={product.name}</p>
    <p>Cantidad:{product.quantity}</p> // <-- display product quantity
  </section>
)}