如何在Supreme组件发起API调用修改Product组件cart模拟数据并展示到购物车

1. 改造父组件Supreme #

父组件需要管理商品的响应式状态，封装加入购物车的API调用和状态更新逻辑，修改后代码如下：

import { useState } from 'react'

function Supreme(){
    // 把supremeData存为响应式状态，初始值为你的模拟数据/接口初始拉取的商品数据
    const [supremeData, setSupremeData] = useState([
        // 示例初始数据结构，替换为你的实际数据
        // {id: 1, name: 'xxx', price: '99', image: 'xxx.jpg', cart: false}
    ])

    // 加入购物车处理函数，接收商品id作为参数
    const handleAddToCart = async (productId) => {
        try {
            // 发起API调用，修改对应商品的cart字段为true，替换为你的实际接口地址
            const apiRes = await fetch(`/api/products/${productId}/update-cart`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({cart: true})
            })
            if(apiRes.ok) {
                // 接口调用成功后更新本地商品状态
                setSupremeData(prevData => prevData.map(item => {
                    if(item.id === productId) {
                        return {...item, cart: true}
                    }
                    return item
                }))
            }
        } catch (error) {
            console.error('加入购物车失败：', error)
        }
    }

    return (
      <div>
        <Meniu />
        <Informatii />
        <h1 className="title">Supreme</h1>
        {/* 把加入购物车方法传给子组件 */}
        <Product myObj={supremeData} onAddToCart={handleAddToCart}/>
        <div className="numar">
          <p >{supremeData.length} Products</p>
        </div>
        {/* 购物车展示区域 */}
        <div className="cart-area">
            <h2>我的购物车</h2>
            {supremeData.filter(item => item.cart).length === 0 ? (
                <p>购物车暂无商品</p>
            ) : (
                supremeData.filter(item => item.cart).map(prod => (
                    <div key={prod.id} className="cart-item">
                        <img src={prod.image} alt={prod.name} width="50"/>
                        <span>{prod.name}</span>
                        <span>{prod.price}</span>
                    </div>
                ))
            )}
        </div>
        <Footer />
      </div>
    )
}

2. 改造子组件Product #

子组件接收父组件传递的加入购物车方法，绑定到添加按钮的点击事件上，修改后代码如下：

function Product (props) {
    const Lista = [...props.myObj]
    return (
        <div className="product-list">
            {Lista.map((produse)=>{
                return(
                    <div className="produse" key={produse.id}>
                        <img src={produse.image} alt={produse.name} />
                        <h1>{produse.name}</h1>
                        <h2>{produse.price}</h2>
                        {/* 点击按钮触发父组件的加入购物车方法，传入当前商品id */}
                        <button 
                            className="button-product"
                            onClick={() => props.onAddToCart(produse.id)}
                            disabled={produse.cart} // 已加入购物车的商品按钮禁用
                        >
                            {produse.cart ? '已加入购物车' : 'ADD TO CART'}
                        </button>
                    </div>              
                )
            })}
        </div>
    )
}

内容的提问来源于stack exchange，提问作者Adi Cotirla