React JS开发购物车时无法正常增减商品数量值如何解决

问题根源 #

核心错误出在valueCal、decrement两个函数里的后置自增/自减运算符逻辑：
后置v++/v--会先返回变量的原始值，再执行增减运算，所以你传给setQuantity的永远是修改前的旧数量，状态没有发生变化，自然不会触发界面更新。

修复方案 #

第一步：修改增减函数逻辑 #

把后置运算换成前置运算，同时增加边界判断避免商品数量出现负数：

// 修改前（错误）
let valueCal =(v)=>{
  console.log(v)
  return v++
}
let decrement =(v)=>{
  console.log(v)
  return v--
}

// 修改后（正确）
const increment = (v) => {
  console.log(v)
  return ++v // 先加1再返回新值
}
const decrement = (v) => {
  console.log(v)
  return v > 1 ? --v : 1 // 先减1再返回，且最低数量限制为1
}

第二步（可选优化）：简化取值逻辑 #

你现在从按钮的value属性取数量属于多此一举，直接用当前遍历到的商品自身的quantity属性更稳妥，避免后续渲染逻辑变动导致取值错误：

<button
  onClick={() => setQuantity(product, increment(product.quantity))}
>Add</button>
<button
  onClick={() => setQuantity(product, decrement(product.quantity))}
>Drop</button>

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