列表添加至购物车（Typescript React Shopping cart）

import React, { useState } from 'react';
 
interface Product {
  id: number;
  name: string;
  price: number;
}
 
interface CartItem {
  product: Product;
  quantity: number;
}
 
const ShoppingCart: React.FC = () => {
  const [cartItems, setCartItems] = useState<CartItem[]>([]);
 
  const addToCart = (product: Product, quantity: number) => {
    const existingItemIndex = cartItems.findIndex(item => item.product.id === product.id);
    if (existingItemIndex !== -1) {
      // 更新购物车中已存在的商品数量
      setCartItems(cartItems.map((item, index) => {
        if (index === existingItemIndex) {
          return { ...item, quantity: item.quantity + quantity };
        }
        return item;
      }));
    } else {
      // 添加新商品到购物车
      setCartItems([...cartItems, { product, quantity }]);
    }
  };
 
  // 假设的商品信息
  const product: Product = { id: 1, name: '笔记本电脑', price: 1200 };
 
  // 添加商品到购物车
  addToCart(product, 1);
 
  return (
    <div>
      <h2>购物车中的商品</h2>
      <ul>
        {cartItems.map(item => (
          <li key={item.product.id}>
            {item.product.name} - 数量: {item.quantity}
          </li>
        ))}
      </ul>
    </div>
  );
};
 
export default ShoppingCart;

这段代码实现了一个简单的购物车功能，其中包含添加商品到购物车的逻辑。它使用React的useState钩子来管理状态，并且可以处理同一商品的数量更新。这个例子教会开发者如何在React应用中使用Typescript来管理状态和逻辑。