如何通过在react js中映射所有独立的产品id来增加数量并减少输入数量

import React, { useState } from 'react';

const Product = ({ id, name, quantity, increaseQuantity, decreaseQuantity }) => {
  return (
    <div>
      <h3>{name}</h3>
      <p>Quantity: {quantity}</p>
      <button onClick={() => increaseQuantity(id)}>Increase</button>
      <button onClick={() => decreaseQuantity(id)}>Decrease</button>
    </div>
  );
};

export default Product;

import React, { useState } from 'react';
import Product from './Product';

const App = () => {
  const [products, setProducts] = useState([
    { id: 1, name: 'Product 1', quantity: 0 },
    { id: 2, name: 'Product 2', quantity: 0 },
    { id: 3, name: 'Product 3', quantity: 0 },
  ]);

  const increaseQuantity = (id) => {
    setProducts((prevProducts) =>
      prevProducts.map((product) =>
        product.id === id ? { ...product, quantity: product.quantity + 1 } : product
      )
    );
  };

  const decreaseQuantity = (id) => {
    setProducts((prevProducts) =>
      prevProducts.map((product) =>
        product.id === id ? { ...product, quantity: product.quantity - 1 } : product
      )
    );
  };

  return (
    <div>
      {products.map((product) => (
        <Product
          key={product.id}
          id={product.id}
          name={product.name}
          quantity={product.quantity}
          increaseQuantity={increaseQuantity}
          decreaseQuantity={decreaseQuantity}
        />
      ))}
    </div>
  );
};

export default App;