React JS表格中如何实现单个商品的独立数量增减功能

所有表格行共用同一个独立的count状态，点击任意增减按钮都会修改这个全局状态，所有行读取的都是同一个值，自然会同步变化，无法实现单商品独立计数。

把数量字段绑定到每个商品对象自身，修改数量时只更新对应商品的数值，不再使用全局统一的count状态。

具体实现 #

• 处理商品列表数据源时，给每个商品项添加初始count字段，默认值可设为1
• 编写通用的数量更新方法，传入目标商品id和调整步长（加1/减1），仅更新匹配到id的商品的count值
• 渲染表格行时，数量展示直接读取当前遍历商品的count属性，增减按钮点击时传入当前商品id调用更新方法

修正后代码 #

<tbody>
  {
    newProducts.map(newProduct => {
      return(
        <tr key={newProduct._id}>
          <td>{newProduct.name}</td>
          <td>{newProduct.count}</td>
          <td>
            <FontAwesomeIcon 
              onClick={() => updateCount(newProduct._id, 1)} 
              icon={faPlus}
            />
          </td>
          <td>
            <FontAwesomeIcon 
              onClick={() => updateCount(newProduct._id, -1)} 
              icon={faMinus}
            />
          </td>
          <td>
            <FontAwesomeIcon 
              onClick={() => handleDelete(newProduct._id)} 
              icon={faRemove}
            />
          </td>
        </tr>
      )
    })
  }
</tbody>

配套的数量更新方法：

const updateCount = (productId, step) => {
  setNewProducts(prev => prev.map(product => {
    if(product._id === productId) {
      // 限制数量最小为1，避免出现负数
      return {
        ...product,
        count: Math.max(1, product.count + step)
      }
    }
    return product
  }))
}

提示：如果商品数据来自接口请求，拿到返回结果后先遍历给每个商品追加初始count字段，再存入newProducts状态，示例：const formattedList = res.data.map(item => ({...item, count: 1}))

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