I have a cart summary component which takes the items added to the cart. I map through each item in the cart to create this summary (the state is managed in a useCart context). As part of each item, there is a quantity counter to allow the user to update the quantity of an item in the cart directly. The bug, however, is that each quantity counter does not work independently of one another. When I change one, they all change. I know that in a simpler application, I could just use separate useStates, but as this is a component which uses a map, I'm not sure that will work for me. The useQuantityCounter hook:

import { useCart } from "../_context/useCart";

export function useQuantityCounter(minQty = 1, maxQty = 99) {
  const { qty, setQty } = useCart();

  function increment() {
    setQty((prev) => (prev < maxQty ? prev + 1 : prev));
  }

  function decrement() {
    setQty((prev) => (prev > minQty ? prev - 1 : prev));
  }

  return { qty, increment, decrement };

The quantityCounter component:

import { useQuantityCounter } from "../../_hooks/useQuantityCounter";

function QuantityCounter() {
  const { qty, increment, decrement } = useQuantityCounter();
  return (
    <div className="flex items-center ">
      <h2>Quantity</h2>
      <div className="w-auto px-4 md:w-1/6 lg:w-2/12 ">
        <div className="inline-flex items-center px-4 font-semibold text-gray-500 border  border-gray-200 rounded-md   ">
          <button className=" hover:text-gray-700 " onClick={decrement}>
            -
          </button>
          <input
            className="w-12 px-2 justify-center  text-center border-0 rounded-md bg-gray-50 py-1.5  "
            value={qty}
            readOnly
          />
          <button className=" hover:text-gray-700 " onClick={increment}>
            +
          </button>
        </div>
      </div>
    </div>
  );
}

export default QuantityCounter;

The state for the qty is stored in a useCart context:

const [qty, setQty] = useState(1);

which is just exported as such and updated outside of the context.

The cart products component:

import Image from "next/image";
import QuantityCounter from "../../UI/QuantityCounter";
import { useCart } from "../../../_context/useCart";

function CartProducts({ src, alt, name, description, price, size }) {
  const { qty } = useCart();
  return (
    <div>
      <div className="flex  items-center mb-6 -mx-4 md:mb-8">
        <div className="w-full px-4 mb-6 md:w-4/6 lg:w-6/12 md:mb-0">
          <div className="flex flex-wrap items-center -mx-4">
            <div className="w-full px-4 mb-3 md:w-1/3">
              <div className="w-full h-96 md:h-24 md:w-24">
                <Image
                  src={src}
                  alt={alt}
                  height={500}
                  width={500}
                  className="object-cover w-full h-full"
                />
              </div>
            </div>
            <div className="w-2/3 pl-10 px-4">
              <h2 className="mb-2 text-xl font-bold ">{name}</h2>
              <p className="text-gray-500  ">{description}</p>
            </div>
          </div>
        </div>
        <div className="hidden px-4 lg:block lg:w-2/12">
          <p className="text-lg font-bold text-indigo-500 ">{size}</p>
        </div>
        <div className="hidden px-4 lg:block lg:w-2/12">
          <p className="text-lg font-bold text-indigo-500 ">€ {price}</p>
        </div>
        <QuantityCounter qty={qty} />
        <div className="w-auto px-4 text-right md:w-1/6 lg:w-2/12 ">
          <p className="text-lg font-bold text-indigo-500 ">€ {price * qty}</p>
        </div>
      </div>
    </div>
  );
}

export default CartProducts;

The cart summary that maps over and displays the cart products:

"use client";
import React, { memo } from "react";
import CartHeader from "./cartScreen/CartHeader";
import CartOrderSummary from "./cartScreen/CartOrderSummary";
import CartProducts from "./cartScreen/CartProducts";
import { useCart } from "../../_context/useCart";
import QuantityCounter from "../UI/QuantityCounter";

const MemoizedCartProducts = memo(CartProducts);

function CartSummary() {
  const { cart, qty } = useCart();

  // Early return if the cart is empty to reduce unnecessary renders
  if (cart.length === 0) {
    return (
      <section className="flex items-center mt-20 font-themeFont mb-9">
        <div className="justify-center flex-1 px-4 py-6 mx-auto max-w-7xl lg:py-4 md:px-6">
          <div className="p-8 bg-gray-50">
            <h2 className="mb-8 text-4xl font-bold">Your Cart</h2>
            <div className="h-full text-center mt-10">
              <h1>Nothing has been added to the cart 

                                发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744302095a4567549.html