在react native中使用@reduxjs/toolkit更新购物车商品的数量和价格

Question

我有一个cart状态，其中包含类似于以下的数组：

[[{"Id": 123, "duration": 10, "name": "Burger", "price": 10, "qty": 1, "total": "10.00"}]]

这是减速器，显示我添加了更多的减速器来增加和减少数量：

const cartSlice = createSlice({
name: "cart",
initialState: [],
reducers: {
addItemToCart: (state, action) => {
state.push(action.payload); 
},
removeItemFromCart: (state, action) => {
return state.filter(i => i[0].Id !== action.payload);
},
ADD_QUANTITY: (state, action) => {
// notsure how to handle here 
},
SUB_QUANTITY: (state, action) => {
// notsure how to handle here 
}
}
})

在购物车屏幕上，我正在做这样的事情：

<TouchableOpacity onPress={() => dispatch(ADD_QUANTITY(item[0].Id))} >
<Ionicons name="add-circle-outline" size={22} color="#cccccc" />
</TouchableOpacity>

所以，一旦按下添加数量的按钮，我想用新的数量和新的总价更新购物车状态，并且在减少数量时相同，这听起来可能是一个很容易的问题，但我是一个初学者，我想不通。

Answer 1

根据您提供的输入数组，您可以像这样实现数组中数量的加法和减法。您必须使用forEach循环状态，然后检查Id是否与您在操作负载中传递的Id匹配，如果是，则递增或递减值。

编辑：

回过头来看，我意识到这是错误的，而且对实际数据也不起作用。我建议在循环覆盖嵌套数组之前先将其压平。

const cartSlice = createSlice({
name: "cart",
initialState: [],
reducers: {
addItemToCart: (state, action) => {
state.push(action.payload);
},
removeItemFromCart: (state, action) => {
state.flat().filter((i) => i.Id !== action.payload);
},
addQuantityToItem: (state, action) => {
state.flat().forEach((item) => {
if (item.Id === action.payload) {
item.qty += 1;
}
});
},
subtractQuantityFromItem: (state, action) => {
state.flat().forEach((item) => {
if (item.Id === action.payload) {
item.qty -= 1;
}
});
},
},
});

示例用例，其中您必须传入id:的值

<TouchableOpacity onPress={() => dispatch(addQuantityToItem(id))} >
<Ionicons name="add-circle-outline" size={22} color="#cccccc" />
</TouchableOpacity>