React购物车异常：点击添加单个商品却批量加入全部商品

当点击添加某个商品到购物车时，系统会将所有商品一次性加入购物车，而非仅添加点击的商品。

FoodItem.jsx 代码 #

import React, { useContext } from 'react'

import './FoodItem.css'
import { assets } from '../../assets/assets'
import { StoreContext } from '../../context/StoreContext'


const FoodItem = ({id, name, price, description, image}) => {


    const {cartItems,addToCart,removeFromCart} = useContext(StoreContext);

    return (
    <div className='food-item'>
        <div className="food-item-img-container">
            <img className='food-item-image' src={image} alt=''></img>
            {
                !cartItems[id]
                ?<img className="add" onClick={() => addToCart(id)} src={assets.add_icon_white} alt=''></img>
                :<div className='food-item-counter'>
                    <img onClick={()=>removeFromCart(id)} src={assets.remove_icon_red} alt="" />
                    <p>{cartItems[id]}</p>
                    <img onClick={()=>addToCart(id)} src={assets.add_icon_green} alt=''></img>

                </div>
            }
        </div>
        <div className="food-item-info">
            <div className="food-item-name-rating">
                <p>{name}</p>
                <img src={assets.rating_starts} alt=''></img>
            </div>
            <p className="food-item-desc">
                {description}
            </p>
            <p className="food-item-price">
                 &#8377;{price}
            </p>
        </div>
      
    </div>
  )
}

export default FoodItem

StoreContext.jsx 代码 #

import { createContext, useEffect, useState } from "react";
import { food_list } from "../assets/assets";

export const StoreContext = createContext({});

const StoreContextProvider = (props) => {

    const [cartItems, setCartItems] = useState({});

    const addToCart = (itemId) => {
        if(!cartItems[itemId]){
            setCartItems((prev)=>({...prev,[itemId]:1}))
        }
        else{
            setCartItems((prev)=>({...prev,[itemId]:prev[itemId]+1}))
        }
    }

const removeFromCart = (itemId) => {
      
            setCartItems((prev)=>({...prev,[itemId]:prev[itemId]-1}))
        }
            
        useEffect(() => {
            console.log(cartItems)
        },[cartItems])

    const contextValue = {

        food_list, 
        cartItems,
        setCartItems,
        addToCart,
        removeFromCart

    }

    return (
        <StoreContext.Provider value={contextValue}>
            {props.children}
        </StoreContext.Provider>
    )

}


export default StoreContextProvider;

已做排查：

• 检查过addToCart函数逻辑，确认其仅更新点击商品的状态
• 验证组件是否正确接收并展示cartItems状态
• 添加console.log确认传递给函数的itemId与点击商品匹配

但问题仍未解决。

内容的提问来源于stack exchange，提问作者Yadnyesh-Dashpute