如何用useState实现多Product组件下拉框数量独立更新？

问题背景 #

页面渲染多款可加入购物车的商品，每个商品对应一个Product组件，组件内包含一个<Form.Control>下拉选择框。当前所有组件共享同一个qty状态变量，修改任意商品的选择框时，所有商品的选择值会同步变化。需要实现仅更新当前操作商品的选择值，且商品数量不确定。

解决方案 #

方案1：让Product组件独立维护内部状态

这是最直接的方式，把数量状态放到Product组件内部，每个组件实例拥有自己独立的状态，互不干扰。

// Product 组件代码
import { useState } from 'react';
import { Form } from 'react-bootstrap';

const Product = () => {
  // 每个组件实例单独维护自己的数量状态
  const [qty, setQty] = useState(1);

  return (
    <Form.Control
      className="w-100"
      as="select"
      value={qty}
      onChange={(e) => setQty(e.target.value)}
    >
      {/* 示例：渲染1到10的数量选项 */}
      {Array.from({ length: 10 }, (_, idx) => idx + 1).map(num => (
        <option key={num} value={num}>{num}</option>
      ))}
    </Form.Control>
  );
};

export default Product;

这种方式适合父组件不需要收集所有商品数量的场景，组件完全自治，无需父组件额外管理状态。

方案2：父组件统一管理所有商品的数量（适合需批量操作的场景）

如果父组件需要获取所有商品的选择数量（比如提交购物车时），可以用对象或Map存储每个商品的数量，以商品的唯一ID作为键，确保每个商品的状态独立。

父组件代码

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

const ProductList = ({ products }) => {
  // 初始化：给每个商品设置默认数量1，用商品ID作为标识
  const [productQuantities, setProductQuantities] = useState(() => {
    const initialState = {};
    products.forEach(item => {
      initialState[item.id] = 1;
    });
    return initialState;
  });

  // 处理单个商品数量变化的函数
  const handleQtyUpdate = (productId, newQty) => {
    setProductQuantities(prevState => ({
      ...prevState,
      [productId]: newQty
    }));
  };

  return (
    <div className="product-list">
      {products.map(product => (
        <Product
          key={product.id}
          product={product}
          currentQty={productQuantities[product.id]}
          onQtyChange={(newQty) => handleQtyUpdate(product.id, newQty)}
        />
      ))}
    </div>
  );
};

export default ProductList;

子组件（Product）代码

import { Form } from 'react-bootstrap';

const Product = ({ currentQty, onQtyChange }) => {
  return (
    <Form.Control
      className="w-100"
      as="select"
      value={currentQty}
      onChange={(e) => onQtyChange(e.target.value)}
    >
      {Array.from({ length: 10 }, (_, idx) => idx + 1).map(num => (
        <option key={num} value={num}>{num}</option>
      ))}
    </Form.Control>
  );
};

export default Product;

这种方式可以在父组件中统一获取所有商品的数量，方便后续的批量操作（比如提交订单、计算总价等）。

内容的提问来源于stack exchange，提问作者rastawolf