如何解决反应购物车突变问题
我正在练习 React,开发商店,以添加我使用 this 示例的购物车的功能。
但在我的实现中,即使我的版本几乎相同,“add to cart”按钮并没有区分每个产品,意思是:
- 第一次点击不仅会影响所有按钮,而且其他按钮会更改为“添加更多”图例
- 每次后面的点击只会添加更多用户第一次点击的同类产品,忽略是否点击了另一个。
似乎是由 Reducer 函数中的突变引起的错误:
export const CartReducer = (state,action) => {
switch (action.type) {
case 'ADD_ITEM':
if (!state.cartItems.find((item) => item.id === action.payload.id)) {
//-------HERE
state.cartItems.push({
//mutation here?
...action.payload,quantity: 1,});
//-------
}
return {
...state,...sumItems(state.cartItems),cartItems: [...state.cartItems],};
有什么替代方法呢? 如何在没有突变的情况下推送状态中的项目?
完整的 te 文件其 here
Here 您可以检查部署并复制错误,here 其正确的功能演示
解决方法
您正在改变原来的 state
,这在 redux 中是不好的做法。你可以做的是这样的事情来防止它:
export const CartReducer = (state,action) => {
switch (action.type) {
case 'ADD_ITEM':
if (!state.cartItems.find((item) => item.id === action.payload.id)) {
// If you have Lint problems with this declaration,you can set a variable before the switch
const cartItems = [...state.cartItems,action.payload];
return {
...state,...sumItems(cartItems),cartItems,};
}
return state;
}
}
,
state.cartItems.push 在这里是错误的,你正在改变状态(反模式)。
首先你检查你的物品是否存在,就像你在乞讨时所做的那样。如果项目存在,只需返回状态。如果没有你可以返回 您可以将状态返回为
return {
...state,...sumItems(state.cartItems + 1),cartItems: [...state.cartItems,action.payload],};
在深入细节和复杂的更新操作之前,您应该熟悉主题数组析构、对象析构、浅拷贝、扩展操作、复制数组、切片、拼接、过滤操作。否则你可能会像上面那样执行一些直接的修改。如果它们太复杂,你可以使用其他使这个操作更容易的库,例如 immutable.js 但请记住,使用额外的库会导致很小的性能损失。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。