React中productsTable组件多input共用state取值错误如何修复

问题核心原因 #

你当前所有商品的输入框共用同一个input状态，每次修改任意输入框都会覆盖该状态的值，因此点击任意加购按钮拿到的都是最后一次修改的输入值。

可选修复方案 #

方案1：用对象类型状态存储各商品对应购买数量（受控组件方案）

将原来的单值状态改为对象，以商品id为key存储对应商品的购买数量，改动点如下：

1. 替换状态定义

// 替换原来的 const [input, setInput] = useState(0);
const [productQuantities, setProductQuantities] = useState({});

2. 修改输入框的onChange逻辑，仅修改对应商品id的数值

<input
  type='number'
  step='1'
  min={0}
  value={productQuantities[product.id] || 0}
  onChange={(event) => {
    const val = parseInt(event.target.value, 10) || 0;
    if (val >= 0) {
      setProductQuantities(prev => ({
        ...prev,
        [product.id]: val
      }));
    }
  }}
/>

3. 修改加购按钮的点击事件，取对应商品的数量

<Button
  onClick={() => handleAdd(product, productQuantities[product.id] || 0)}
  variant='primary'
>
  Add To Cart
</Button>

4. 调整校验逻辑，无需再修改全局状态

const validateInput = (inputValue) => {
  const value = parseInt(inputValue, 10);
  return isNaN(value) || value < 0;
};

方案2：非受控组件方案（代码改动最小）

如果不需要实时响应输入值做联动逻辑，完全可以不用维护全局状态，点击加购时直接读取对应输入框的值即可：

1. 移除原来的input状态和输入框的onChange绑定
2. 输入框改为非受控模式，增加自定义属性标记对应商品id

<input
  type='number'
  step='1'
  min={0}
  defaultValue={0}
  data-product-id={product.id}
/>

3. 修改handleAdd逻辑，直接读取对应输入框的值

const handleAdd = (product) => {
  const inputEl = document.querySelector(`input[data-product-id="${product.id}"]`);
  const inputVal = parseInt(inputEl.value, 10) || 0;
  const isBadInput = validateInput(inputVal);

  if (isBadInput) {
    toast.error('Invalid product amount', {
      position: toast.POSITION.TOP_CENTER,
      autoClose: 1200,
    });
    return;
  }

  const myProduct = {
    productAmount: inputVal,
    ...product,
    userId: userInfo.userId,
    cartId: cartId,
  };

  dispatch(addToCart(myProduct));
  toast.success('Product added successfuly', {
    position: toast.POSITION.TOP_CENTER,
    autoClose: 1500,
  });
  // 加购完成后清空当前输入框可选
  inputEl.value = 0;
};

4. 加购按钮的点击事件去掉第二个参数即可

<Button
  onClick={() => handleAdd(product)}
  variant='primary'
>
  Add To Cart
</Button>

方案3：封装独立商品行组件（可维护性更高）

你提到的封装独立组件的方案也是合理的，将每个商品行拆分为独立子组件，内部自己维护输入框状态，父组件只需要接收加购事件即可，后续如果要增加库存校验、数量联动等逻辑也更方便解耦。

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