React开发：点击ADD TO CART后如何将生成的对象添加至数组

要实现把show对象添加到数组的需求，你可以按以下步骤修改代码：

• 用useState声明一个数组状态，专门存储购物车的所有商品项
• 在submit函数里通过状态更新方法，把新创建的show对象追加到数组里
• 注意把字符串格式的价格转为数字，避免计算出错
• 确保UUID生成函数已正确导入

修改后的完整代码如下：

// 先安装uuid包（未安装的话执行npm install uuid），再导入
import { v4 as uuidv4 } from 'uuid';
import { useState } from 'react';

const MainPart = () => {
    const [count, setCount] = useState(0);
    // 声明存储购物车项的数组状态
    const [cartItems, setCartItems] = useState([]);

    const cart = {
        mark: '$',
        itemNo: 'Item No.  MA000001',
        title: '4 Person tent',
        price: '150.00'
    }

    const submit = (event) => {
        event.preventDefault();

        const show = {
            id: uuidv4(), // 使用导入的UUID生成函数创建唯一ID
            itemNo: cart.itemNo,
            quantity: count,
            title: cart.title,
            currency: cart.mark,
            // 将价格字符串转为数字后计算总价，避免字符串相乘的错误
            amount: parseFloat(cart.price) * count
        };

        // 更新购物车数组，保留原有项并追加新对象
        setCartItems(prevItems => [...prevItems, show]);
        
        // 可选操作：添加完成后重置数量输入框
        setCount(0);
    }

    return (
        <div>
            <form onSubmit={submit}>
                <Title title={cart.title} itemNo={cart.itemNo} />
                <Currency mark={cart.mark} price={cart.price} />
                <Quantity count={count} setCount={setCount} />
                <div>
                    <input type='submit' value='ADD TO CART' />
                </div>
            </form>
            {/* 可选：在这里渲染购物车列表，直观查看添加结果 */}
            <div className="cart-list">
                <h3>购物车</h3>
                {cartItems.map(item => (
                    <div key={item.id} className="cart-item">
                        <p>{item.title} × {item.quantity}</p>
                        <p>{item.currency}{item.amount.toFixed(2)}</p>
                    </div>
                ))}
            </div>
        </div>
    );
};

关键细节说明： #

• 用useState([])初始化购物车数组cartItems，这是React管理数组状态的标准方式
• 更新数组时使用prevItems => [...prevItems, show]，通过扩展运算符保留原有数据，再追加新对象，避免直接修改状态导致的问题
• parseFloat(cart.price)显式将字符串价格转为数字，确保总价计算准确
• UUID的导入使用别名uuidv4，避免和其他变量命名冲突

内容的提问来源于stack exchange，提问作者kalana wijesekara