当用户将相同的产品添加到购物车时，我不是在状态中创建具有相同属性的新对象，而是尝试增加状态中相同产品的对象属性 quantity状态。由于状态不应直接改变，因此我正在创建状态的副本，编辑数量，然后返回新数组。但我收到“尝试比较'[object Object]'时出错。仅允许数组和可迭代对象”。这是执行此操作的正确“redux”方法吗？以下是我在根 reducer 中添加到购物车的情况。
export function rootReducer(state, action): IAppState {
switch(action.type) {
case ADD_PRODUCT:
return Object.assign({}, state, {
products: state.products.concat( Object.assign({}, action.payload) )
});
case REMOVE_PRODUCT:
return Object.assign({}, state, {
products: state.products.filter(t => t.id !== action.payload)
});
case REMOVE_ALL_PRODUCTS:
return Object.assign({}, state, {
products: []
});
case ADD_TO_CART:
let duplicateItem = state.cartProducts.filter(item => item.id === action.payload.id);
let duplicateIndex;
if(duplicateItem.length) {
for(var i = 0; i <= state.cartProducts.length - 1; i++){
if(state.cartProducts[i].id === duplicateItem[0].id){
duplicateIndex = i;
}
}
let newArray = {...state.cartProducts};
newArray[duplicateIndex].quantity = newArray[duplicateIndex].quantity === undefined ? 1 : newArray[duplicateIndex].quantity++;
return Object.assign({}, state, {
cartProducts: newArray
});
}
return Object.assign({}, state, {
cartProducts: state.cartProducts.concat( Object.assign({}, action.payload.product ) )
});
case REMOVE_FROM_CART:
return Object.assign({}, state, {
cartProducts: state.cartProducts.filter(t => t.id !== action.payload)
});
case CLEAR_CART:
return Object.assign({}, state, {
cartProducts: []
});
}
return state;
}
下面是接口(interface)
export interface IProduct {
id: string;
name: string;
price: string;
category: string;
quantity?: number;
}
export interface IAppState {
products: IProduct[];
cartProducts: IProduct[];
}
最佳答案
您可能希望使用新数量修改 cartProducts。 一个简单的循环遍历 cartproducts 就可以了。
案例ADD_TO_CART:
返回 Object.assign({}, 状态, {
cartProducts: state.cartProducts.map((item, index) => (item.id === action.payload.id)
？项目.数量++ : 项目.数量 = 1)
})
关于javascript - 返回具有编辑对象属性的新 redux 状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54643899/