Javascript 反应JS->；未在函数外部更新变量

所以我正在做一个项目，我想有一个购物车，在购物车里面，你可以看到产品的数量，并通过点击旁边的按钮来改变它。问题是数量的价值被更新了，但它没有显示在购物车中，而且似乎对价格没有任何影响。数量作为对象存储，并在按下按钮时调用的函数中更新。以下是相关代码： 以下是我的减少和恢复功能：

 const increaseQuantity=(product)=>{
        product.quantity+=1;


    }
    const decreaseQuantity=(product)=>{
        if(product.quantity<=1){
           alert('ERROR')
        }
        if(product.quantity>=1){
            product.quantity-=1;

        }

    }

---

我想你应该去用这里的useState钩子。如果您已经在使用useState钩子，请确保使用spread或其他方法使数组不可变。

当您增加或减少数量时，您没有更新productsInCart对象。 您需要更新productsInCart中的数量。请参阅下面的代码

return cartItems.map((cartItem) =>
  cartItem.id === cartItemToAdd.id
    ? { ...cartItem, quantity: cartItem.quantity + 1 }
    : cartItem
);

为了你的案子

const increaseQuantity=(product)=>{
        return productsInCart.map((cartItem) =>
          cartItem.id === product.id
          ? { ...cartItem, quantity: cartItem.quantity + 1 }
          : cartItem
  );
}

---

我已经想到了这一点，但我使用的是类组件，我不确定我是否可以在类组件中使用钩子如果你使用的是类组件，你可以使用状态，然后不要忘记，你可以使用spread或其他方法不可变数组，数量在这里更新吗

{product.quantity}

当您增加和减少时？不，它不会更新，它保持在默认值1

return cartItems.map((cartItem) =>
  cartItem.id === cartItemToAdd.id
    ? { ...cartItem, quantity: cartItem.quantity + 1 }
    : cartItem
);

const increaseQuantity=(product)=>{
        return productsInCart.map((cartItem) =>
          cartItem.id === product.id
          ? { ...cartItem, quantity: cartItem.quantity + 1 }
          : cartItem
  );
}