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

在React.js中，可以通过映射独立的产品ID来增加数量并减少输入数量。下面是一个示例代码：

首先，创建一个React组件，用于显示产品的数量和提供增加/减少数量的功能：

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;

在上述代码中，我们使用useState钩子来定义一个名为products的状态，它是一个包含产品信息的数组。然后，我们定义了两个函数increaseQuantity和decreaseQuantity，用于增加和减少产品的数量。这些函数通过使用map方法来更新products状态中对应产品的数量。

最后，在父组件中，我们使用map方法遍历products数组，并将每个产品的信息传递给Product组件。Product组件接收产品的ID、名称、数量以及增加/减少数量的函数作为props，并在界面上显示这些信息。

这样，当用户点击增加/减少按钮时，对应产品的数量会相应地增加/减少，并在界面上更新显示。

请注意，以上代码仅为示例，实际应用中可能需要根据具体需求进行适当的修改和调整。

关于React.js的更多信息和学习资源，你可以参考腾讯云的React.js产品介绍页面：React.js产品介绍