React添加购物车重构-未知添加状态
React添加购物车重构-未知添加状态
提问于 2018-11-29 11:58:34
我试图添加项目到一个购物车，而没有重拾。我工作，但我认为我做得不好，因为我得到了一个奇怪的数量价值。
到目前为止是如何运作的。单击它在道具中传递给handleAddCartItem()的项目按钮。道具是addedItem，它是项目和addedItemPrice的名称。
默认状态
state = {
term: "",
cart: [
{
item: "",
price: 0,
quantity: 0
}
]};处理程序如何工作.
handleAddCartItem = (addedItem, addedItemPrice) => {
// check if already in cart
let index = this.state.cart.findIndex(el => el.item === addedItem);
if (index == -1) {
console.log("item new to cart");
this.setState(prevState => ({
cart: [
...prevState.cart,
{
item: addedItem,
price: addedItemPrice,
quantity: 1
}
]
}));
} else {
this.setState(prevState => ({
quantity: (prevState.cart[index].quantity += 1)
}));
} };奇怪的额外数量状态屏幕截图.
我是新的反应，所以代码可能是粗俗的，对不起。
我在处理程序中的逻辑-检查项目名已经在购物车数组中了。
-if是新添加的项，然后将新对象添加到数组中。
-if项已经在数组中，那么我使用数组中当前项的索引，并且只更新其数量。
我不明白为什么要添加一个额外的数量状态=/
任何建议都很感激，谢谢。
Stack Overflow用户
发布于 2018-11-29 12:19:34
所需项目对象中的数量需要递增。相反，在根处创建了另一个变量quantity。尝试将其他块更新为：
else {
this.setState(prevState => ({
cart: prevState.cart.map((item, itemIndex) => {
if(itemIndex === index) {
return {
...item,
quantity: item.quantity + 1
}
}
return item
})
}));
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53538551
复制相关文章
相似问题
腾讯云开发者
