ReactJS中更新对象数组状态的数值键值对返回NaN错误

我看了你的购物车增量函数代码，问题出在一个很容易忽略的细节上：你在更新Amount的时候直接用了Amount + 1，但这个Amount并没有指向当前购物车项的对应属性——它要么是未定义的变量，要么不是你想要的当前项的数值，所以计算时会出现undefined + 1，结果自然就是NaN了。

修复后的增量函数 #

function handleIncrement(pID){
  setCartData(prevState => {
    const newState = prevState.map(obj => {
      if (obj.id === pID) {
        // 这里要使用当前遍历对象的obj.Amount，而不是直接写Amount
        return {...obj, Amount: obj.Amount + 1};
      }
      return obj;
    });
    return newState;
  });
}

为什么这样改能解决问题？ #

在prevState.map的回调函数里，obj代表当前正在遍历的购物车条目，只有obj.Amount才是这个条目对应的数量值。之前的写法相当于在没有定义Amount变量的情况下直接使用它，导致计算结果为NaN，修改后就会正确地对当前条目的数量进行递增。

额外注意事项 #

• 确保你初始化cartData的时候，每个条目的Amount属性都是数字类型，如果是字符串类型的话，也会出现"1"+1="11"这种不符合预期的结果，必要时可以用parseInt(obj.Amount, 10) + 1来确保数值类型。
• 如果你后续还要实现递减功能，也要用同样的思路，使用obj.Amount - 1，同时记得做边界判断（比如数量不能小于1）。

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