使用localStorage将商品添加到reactjs中的购物车

import React, { useState } from 'react';

const ShoppingCart = () => {
  const [items, setItems] = useState([]);

  // 添加商品到购物车
  const addToCart = (product) => {
    const cartItems = localStorage.getItem('cartItems')
      ? JSON.parse(localStorage.getItem('cartItems'))
      : [];
    cartItems.push(product);
    localStorage.setItem('cartItems', JSON.stringify(cartItems));
    setItems(cartItems);
  };

  // 从购物车中移除商品
  const removeFromCart = (product) => {
    const cartItems = JSON.parse(localStorage.getItem('cartItems'));
    const updatedItems = cartItems.filter((item) => item.id !== product.id);
    localStorage.setItem('cartItems', JSON.stringify(updatedItems));
    setItems(updatedItems);
  };

  // 获取购物车中的商品列表
  const getCartItems = () => {
    const cartItems = JSON.parse(localStorage.getItem('cartItems'));
    setItems(cartItems);
  };

  return (
    <div>
      <h2>购物车</h2>
      <button onClick={getCartItems}>获取购物车商品</button>
      {items && items.map((item) => (
        <div key={item.id}>
          <p>{item.name}</p>
          <button onClick={() => removeFromCart(item)}>删除</button>
        </div>
      ))}
    </div>
  );
};

export default ShoppingCart;