javascript - Redux:更新对象数组中的项目
问题描述
在我的名为“reducer_product_list”的减速器中,我有这个数组:
let initialState = [
{name: 'Article 1', price: 5, quantity: 10},
{name: 'Article 2', price: 15, quantity: 8},
{name: 'Article 3', price: 7, quantity: 15},
{name: 'Article 4', price: 9, quantity: 5},
{name: 'Article 5', price: 11, quantity: 100},
{name: 'Article 6', price: 23, quantity: 20},
]
当我收到“ADD_TO_CART”操作时,我想减少所选对象的数量。有效负载是这些对象之一。
我输入了上面的代码:
export default (state = initialState, action) => {
switch (action.type) {
case 'ADD_TO_CART':
initialState.map((product, i) => {
if (product.name === action.payload.name) {
initialState[i].quantity -= 1
return state;
}
});
default: return state
}
}
如果我 console.log 我的 initialState,数量正在减少,但在呈现视图的容器中,数量保持不变。
感谢您的帮助。
解决方案
试试这个:
export default (state = initialState, action) => {
switch (action.type) {
case 'ADD_TO_CART':
return state.map(product => {
if (product.name === action.payload.name) {
return {...product, quantity: product.quantity-1}
};
return product;
});
default: return state
}
}
原因是您必须根据请求的操作返回从当前状态派生的新状态对象,以反映所需的更改。有关更多详细信息,请参阅Redux 减速器。
推荐阅读
- reactjs - 防止某些项目出现在融合图表的工具提示中
- android - 在 onCreate 方法完成执行后更新 android 选项卡式活动中选项卡片段的视图
- parameters - 参数化 Jenkins 流水线
- c++ - C++:对“NameSpace::Class::Constructor”的未定义引用
- javascript - 网格中行之间的空间
- python - 撤消“2to3”库的更改
- javascript - exitFullscreen 不退出全屏
- ajax - 用于选择日期的 WooCommerce 预订 AJAX 代码
- netlogo - NetLogo 无法检测半径内的海龟
- reactjs - 单击 ReactJS 上的按钮时,报价机无法获取新的 api 报价