React购物车功能开发求助：实现商品添加与清空功能

针对你的需求，要实现商品添加到购物车和清空购物车功能，核心是组件间共享购物车状态，因为Home和Checkout是两个独立组件，需要把状态提到它们的父组件（比如App）中管理，下面是具体实现步骤：

1. 父组件(App)管理购物车状态 #

在App组件中定义购物车数组状态，以及添加商品、清空购物车的方法，然后把这些状态和方法传递给Home和Checkout组件：

import { useState } from 'react';
import Home from './Home';
import Checkout from './Checkout';

function App() {
  // 购物车商品列表状态
  const [cartItems, setCartItems] = useState([]);

  // 添加商品到购物车的方法
  const addToCart = (coffee) => {
    // 检查商品是否已在购物车，避免重复添加（可选逻辑）
    const isExist = cartItems.find(item => item.id === coffee.id);
    if (isExist) {
      // 已存在则增加商品数量
      setCartItems(cartItems.map(item => 
        item.id === coffee.id ? {...item, quantity: item.quantity + 1} : item
      ));
    } else {
      // 不存在则添加新商品，默认数量1
      setCartItems([...cartItems, {...coffee, quantity: 1}]);
    }
  };

  // 清空购物车的方法
  const clearCart = () => {
    setCartItems([]);
  };

  return (
    <div className="App">
      <Home addToCart={addToCart} />
      <Checkout cartItems={cartItems} clearCart={clearCart} />
    </div>
  );
}

export default App;

2. 修改Home组件，绑定添加购物车事件 #

在Home组件中接收父组件传来的addToCart方法，给"Add to Cart"按钮绑定点击事件，把当前咖啡数据传进去：

import { useState, useEffect } from 'react';

function Home({ addToCart }) {
    const [data, setData] = useState([]);
    useEffect(() => {
      fetch("/coffees").then((res) => {
        if (res.ok) {
          res.json().then((data) => setData(data))
        }
      });
    }, [])

    return (
    <>
    <div className="box">
        <div className="projo">
        <h2 >Welcome to Coffee-cafe</h2>
        </div>
            <div className="projects">
             {data.map((coffee) =>{ // 变量名改为coffee，避免和外层状态变量冲突
              return(
                <div className="card" key={coffee.id}> {/* 列表渲染必须加唯一key */}
                    <img className="avatar" src={coffee.coffee_image} alt={coffee.coffee_name}></img>
                    <div className="card-content">
                        <h4><b>{coffee.coffee_name}</b></h4>
                        <p id="desc">{coffee.description}</p>
                        <p className="price">{coffee.price}</p>
                        <button onClick={() => addToCart(coffee)} className="btn1" id="btn1">Add to Cart</button>
                    </div>
                </div>
                )
            })}
            </div>    
    </div>
    </>
    )
}

export default Home;

3. 修改Checkout组件，渲染购物车并绑定清空事件 #

在Checkout组件中接收父组件传来的cartItems和clearCart方法，渲染购物车商品列表，并给清空按钮绑定事件：

function Checkout({ cartItems, clearCart }) {
    // 计算购物车总价（可选逻辑）
    const totalPrice = cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0);

    return (
        <>
         <div className="section">
           <h3>购物车</h3>
           {cartItems.length === 0 ? (
             <p>购物车是空的</p>
           ) : (
             <div>
               {cartItems.map(item => (
                 <div className="photo" key={item.id}>
                     <img className="dp" src={item.coffee_image} alt={item.coffee_name}></img>
                     <div className="info">
                         <h3>咖啡: {item.coffee_name}</h3>
                         <p>价格: {item.price}</p>
                         <p>数量: {item.quantity}</p>
                         <p>类别: {item.category}</p>
                     </div>
                 </div>
               ))}
               <p>总价: {totalPrice}</p>
               <div className="check-out-btn">
                   <button className="delete" onClick={clearCart}>ClearCart</button>
               </div>
             </div>
           )}
       </div>
        </>
    )
}

export default Checkout;

关键说明 #

• 状态提升：把购物车状态放在父组件，子组件通过props获取状态和修改方法，这是React组件间共享状态的基础方式，适合新手理解
• 列表渲染必须加key属性，确保React能正确识别每个列表项
• 添加商品时的重复判断逻辑可根据需求调整，比如直接允许重复添加或限制数量

内容的提问来源于stack exchange，提问作者Kelvin Matheka