React购物车：单个商品Quantity独立更新前端显示问题咨询

问题根源是你用了全局的Quantity状态，所有商品都绑定这个值，所以点击任意商品的加号，所有商品的数量都会同步变化。后端已经正确处理了对应商品的数量更新，只需调整前端状态管理和渲染逻辑：

修改步骤 #

• 移除全局的Quantity、quantityRef和price状态，把数量存储在每个商品项中
• 调整increaseQTY函数，仅更新点击商品的数量
• 渲染时使用每个商品自身的quantity值计算并显示数量和价格
• 更新后端请求逻辑，确保传递对应商品的最新数量

修改后的完整代码 #

import { FormButton } from "../../shared/SharedElements/Buttons";
import { Header } from "../../shared/SharedElements/SharedElements";
import * as l from './CartElements';
import profilepic from '../../../Images/person2.jpg';
import Spinner from "../../shared/Spinner/Spinner";
import useFetch from "../../../Hooks/useFetch";
import { useEffect, useState } from "react";
import useAuth from "../../../Hooks/useAuth";
import styled from "styled-components";
import { MdCheckBox } from 'react-icons/md';
import { MdCheckBoxOutlineBlank } from 'react-icons/md';
import { AiFillPlusCircle } from 'react-icons/ai';
import { MdDelete } from 'react-icons/md';
import axios from "axios";
import { Link } from "@mui/material";

const CartComponent = ({data}) => {
  const {user} = useAuth();
  // 初始化Items，确保每个商品都有自己的quantity字段
  const [Items, setItems] = useState(() => 
    data.map(item => ({...item, quantity: item.quantity || 1}))
  );
  const [clickedIndex, setClickedIndex] = useState({});
  const [selectItem, setSelectItem] = useState();
  const [OrderItem, setOrderItem] = useState({});

  //Select Item Independelntly
  const handleClick = async (index) => {
    setClickedIndex(state => ({
      ...state, //copy previous state
      [index]: !state[index] //update value by index key
    }));
    setSelectItem(index);
    setOrderItem(Items[index]);
  };

  //Delete Cart Item
  const deleteCartItem = async ({cartId,foodId}) => {
    try {
      const formData = {cartId,foodId} 
      const res = await axios.patch('api/v1/Customer/RemoveCartItem',formData);
      // 删除后更新前端列表
      setItems(prev => prev.filter(item => item.cartId !== cartId));
      console.log(res);
    } catch (error) {
      console.log(error.message);
    }
  }

  const selectOne = async (index) => {
    const item = Items[index];
    const cartId = item.cartId;
    const foodId = item.id;
    console.log(item);
    await deleteCartItem({cartId,foodId});
    handleClick(index);
  }

  //Increase Quantity
  const AddQuantity = async ({foodId,quantity}) => {
    try {
      const formData = {foodId,quantity}
      const res = await axios.post('api/v1/Customer/Addtocart',formData);
      console.log(res);
    } catch (error) {
      console.log(error.message);
    }
  }

  const increaseQTY = async(index) => {
    const item = Items[index];
    const foodId = item.id;
    const newQuantity = item.quantity + 1;
    
    // 先更新前端状态，保证即时反馈
    setItems(prev => prev.map((cart, i) => 
      i === index ? {...cart, quantity: newQuantity} : cart
    ));
    
    handleClick(index);
    await AddQuantity({foodId, quantity: newQuantity});
  }

  // 计算购物车总价
  const calculateTotalPrice = () => {
    return Items.reduce((total, item) => total + (item.quantity * item.price), 0);
  }

  return ( 
    <>
     <l.Container>
       <l.SubContainer>
        <l.SubSection1>
          <l.ProfileImage>
            <l.Image src={`http://localhost:5000/images/${user?.ProfileImage}`}/>
          </l.ProfileImage>
          <l.Name>
            {user?.Name}
          </l.Name>
        </l.SubSection1>
        <l.SubSection2>
          <Header>MY CART</Header>
        </l.SubSection2>
        <l.SubSection3>
          <l.Left>
            {
              Items.map((cart,index) => {
                return(
                  <l.CartSection key={cart.cartId}>
                    <l.ItemsCard>
                      <l.FoodImage>
                        <l.Food src={`http://localhost:5000/Foodimages/${cart.image}`}/>
                      </l.FoodImage>
                      <l.Details>
                        <l.MainText>
                          <l.FoodName>
                            {cart.name}
                          </l.FoodName>
                        </l.MainText>
                        <l.SubText>
                          <l.Text>
                            Quantity : {cart.quantity}
                          </l.Text>
                          <l.Text>
                            Price : {cart.quantity * cart.price}
                          </l.Text>
                        </l.SubText>
                      </l.Details>
                      <l.Icon onClick={() => increaseQTY(index)}>
                        <AiFillPlusCircle/>
                      </l.Icon>
                      <l.Icon>
                        <MdDelete onClick={() => selectOne(index)}/>
                      </l.Icon>
                    </l.ItemsCard>
                  </l.CartSection>  
                )
              })
            }
          </l.Left>
          <l.Right>
            <l.Description>
              <l.ItemTexts>
                <l.Label>
                  Item : {Items.length}
                </l.Label>
              </l.ItemTexts>
              <l.ItemTexts>
                <l.Label>
                  Total Quantity : {Items.reduce((sum, item) => sum + item.quantity, 0)}
                </l.Label>
              </l.ItemTexts>
              <l.ItemTexts>
                <l.Label>
                  Total Price : {calculateTotalPrice()}
                </l.Label>
              </l.ItemTexts>
              <l.ButtonSection>
                <Link to='/CustomerPay'>
                  <FormButton>
                    Order
                  </FormButton>
                </Link>
              </l.ButtonSection>
            </l.Description>
          </l.Right>
        </l.SubSection3>
      </l.SubContainer>
     </l.Container>
    </>
  );
}

export default CartComponent;

关键改动说明 #

1. 状态管理：将全局Quantity替换为每个商品自带的quantity字段，初始化时从后端数据继承或设为1
2. 数量更新：increaseQTY函数通过map更新对应索引商品的数量，保证仅目标商品变化
3. 渲染逻辑：每个商品的数量和单价计算都使用自身的quantity值，不再依赖全局状态
4. 总价计算：新增calculateTotalPrice函数，遍历所有商品计算真实总价
5. 删除逻辑：删除商品后同步更新前端列表，保证UI和数据一致

内容的提问来源于stack exchange，提问作者Aravinda Chathuranga