React reducer 错误的增量数
React reducer wrong increment number
我在调度触发我的 ADD_TO_CART 类型的操作时遇到问题。我想在用户单击时增加购物车中添加的特定数量的数量。我得到的数量数字是:1、3、5、7、9..但是它们应该只增加 1,比如 1、2、3、4、5。为什么我在 if 语句中得到双倍增量当我想间接更新状态而不改变它时?非常感谢任何形式的帮助。
这是我的代码:
switch(action.type){
case 'ADD_TO_CART':
let tempCart = [...state.cart];
let specificIndex = state.cart.findIndex((obj) => obj.id === action.item.id);
if(specificIndex >= 0){
tempCart[specificIndex].quantity +=1; // it should increment only by 1 and not by 2
tempCart[specificIndex].price += action.item.price;
return{
...state,
cart : tempCart,
}
}
上面的例子是我的状态:
export const initialState = {
cart: [],
};
我怀疑这是因为您将 tempCart
视为 mutable(直接添加到其成员),而实际上它只是对 (不是 state
的一部分的副本,它应该始终被视为 不可变的 。相反,请尝试以下操作:
switch (action.type) {
case "ADD_TO_CART":
let specificIndex = state.cart.findIndex(
(obj) => obj.id === action.item.id
);
if (specificIndex >= 0) {
return {
...state,
cart: state.cart.map((item, idx) =>
idx == specificIndex
? {
...item,
quantity: item.quantity + 1,
price: item.price + action.item.price,
}
: item
),
};
}
}
如果您愿意,请参阅 Immutable Update Patterns for more. Note that, even in this small example, these sorts of updates can quickly become unwieldy. There are helper libraries 可以简化流程的可用信息。
我在调度触发我的 ADD_TO_CART 类型的操作时遇到问题。我想在用户单击时增加购物车中添加的特定数量的数量。我得到的数量数字是:1、3、5、7、9..但是它们应该只增加 1,比如 1、2、3、4、5。为什么我在 if 语句中得到双倍增量当我想间接更新状态而不改变它时?非常感谢任何形式的帮助。
这是我的代码:
switch(action.type){
case 'ADD_TO_CART':
let tempCart = [...state.cart];
let specificIndex = state.cart.findIndex((obj) => obj.id === action.item.id);
if(specificIndex >= 0){
tempCart[specificIndex].quantity +=1; // it should increment only by 1 and not by 2
tempCart[specificIndex].price += action.item.price;
return{
...state,
cart : tempCart,
}
}
上面的例子是我的状态:
export const initialState = {
cart: [],
};
我怀疑这是因为您将 tempCart
视为 mutable(直接添加到其成员),而实际上它只是对 (不是 state
的一部分的副本,它应该始终被视为 不可变的 。相反,请尝试以下操作:
switch (action.type) {
case "ADD_TO_CART":
let specificIndex = state.cart.findIndex(
(obj) => obj.id === action.item.id
);
if (specificIndex >= 0) {
return {
...state,
cart: state.cart.map((item, idx) =>
idx == specificIndex
? {
...item,
quantity: item.quantity + 1,
price: item.price + action.item.price,
}
: item
),
};
}
}
如果您愿意,请参阅 Immutable Update Patterns for more. Note that, even in this small example, these sorts of updates can quickly become unwieldy. There are helper libraries 可以简化流程的可用信息。