React遍历商品信息时如何单独捕获每个Input的数量状态

你当前所有输入框都绑定了同一个state变量，任意输入框修改都会触发这个全局state更新，所有输入框都读取同一个state值，自然会同步变动。

• 第一步：调整state结构，用对象存储每个商品id对应的数量

// 初始为空对象，键为商品product_id，值为对应商品的选购数量
const [quantityMap, setQuantityMap] = useState({})

如果需要默认数量为1，可以在拿到商品列表后初始化state：

useEffect(() => {
  if (receivedProductsKitchen) {
    const initQuantity = {}
    receivedProductsKitchen.forEach(item => {
      initQuantity[item.product_id] = 1
    })
    setQuantityMap(initQuantity)
  }
}, [receivedProductsKitchen])

• 第二步：改造handleQuantity方法，接收商品id和输入值两个参数

const handleQuantity = (productId, inputValue) => {
  // 只更新当前商品id对应的数量，其他商品的数量保持不变
  setQuantityMap(prevState => ({
    ...prevState,
    [productId]: inputValue
  }))
}

• 第三步：修改遍历渲染中的输入框配置，绑定对应商品的数值和修改事件
  将原输入框代码改为受控组件，绑定对应商品的数量值：

<input 
  id={products.product_id} 
  type="number" 
  placeholder="1" 
  value={quantityMap[products.product_id] || ''}
  onChange={(e) => handleQuantity(products.product_id, e.target.value)}
/>

后续触发加购时，直接通过当前商品的product_id从quantityMap中取出对应数量即可，示例：

const addToCart = (product) => {
  // 未输入的情况默认取1，可按需调整
  const selectQuantity = quantityMap[product.product_id] || 1
  // 执行加购接口请求等后续逻辑
}

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