、使用react新写法hooks，再次完成react版的购物车,要求有商品名称,商品数量,商品单价,商品数量的加减操作,单个商品的小计,最后还有所有商品的总价,每个商品还要有删除

功能。

代码如下：

import React, { useState } from 'react';

const Cart = () => {
  const [cartItems, setCartItems] = useState([
    { id: 1, name: 'iPhone', quantity: 1, price: 999 },
    { id: 2, name: 'iPad', quantity: 2, price: 799 },
    { id: 3, name: 'MacBook', quantity: 1, price: 1999 }
  ]);

  const deleteItem = (id) => {
    setCartItems(cartItems.filter(item => item.id !== id));
  };

  const updateQuantity = (id, quantity) => {
    setCartItems(
      cartItems.map(item => item.id === id ? { ...item, quantity } : item)
    );
  };

  const calculateTotal = () => {
    return cartItems.reduce((total, item) => {
      return total + (item.price * item.quantity);
    }, 0);
  };

  return (
    <div>
      <h2>Shopping Cart</h2>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Quantity</th>
            <th>Price</th>
            <th>Subtotal</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {cartItems.map(item => (
            <tr key={item.id}>
              <td>{item.name}</td>
              <td>
                <button onClick={() => updateQuantity(item.id, item.quantity - 1)}>-</button>
                {item.quantity}
                <button onClick={() => updateQuantity(item.id, item.quantity + 1)}>+</button>
              </td>
              <td>{item.price}</td>
              <td>{item.price * item.quantity}</td>
              <td><button onClick={() => deleteItem(item.id)}>Delete</button></td>
            </tr>
          ))}
        </tbody>
        <tfoot>
          <tr>
            <td colSpan="3">Total:</td>
            <td>{calculateTotal()}</td>
            <td></td>
          </tr>
        </tfoot>
      </table>
    </div>
  );
};

export default Cart;

在这个例子中，我们使用了 `useState` hook 来管理购物车中的商品列表。每个商品都有一个 `id`、`name`、`quantity` 和 `price` 属性。我们还定义了三个函数：`deleteItem`、`updateQuantity` 和 `calculateTotal`。

`deleteItem` 函数用于删除购物车中的商品。我们使用 `filter` 方法来过滤出不是要删除的商品，并将剩下的商品列表更新到状态中。

`updateQuantity` 函数用于更新购物车中商品的数量。我们使用 `map` 方法来遍历商品列表，找到要更新的商品，并将其数量更新为传入的 `quantity` 值。

`calculateTotal` 函数用于计算购物车中所有商品的总价。我们使用 `reduce` 方法来遍历商品列表，将每个商品的小计加起来，最终得到总价。

在 `render` 方法中，我们使用 `map` 方法来遍历商品列表，并渲染每个商品的名称、数量、单价、小计和删除按钮。每个商品数量的加减操作，都是通过调用 `updateQuantity` 函数来实现的。购物车中所有商品的总价，则是通过调用 `calculateTotal` 函数来计算的。