Question

我正在创建一个用于电子商务目的的本机应用程序，并试图使购物车功能正常工作。我正在使用redux，并且能够一次向购物车中添加一项，但是当我尝试从购物车中删除一项时，所有相同的项都会被删除。例如，如果我的购物车中有2支铅笔，3支笔和4个笔记本，并且单击其中一个笔记本上的“删除”按钮，则会从购物车中删除所有4个笔记本。我希望一次只能删除一项。

const cartItems = (state = [], action) => {
   switch (action.type) {
    case 'ADD_TO_CART':
        return [...state, action.payload]
    case 'REMOVE_FROM_CART':
        return state.filter(cartItem => cartItem.id !== action.payload.id)
        //return state.filter(cartItem => cartItem !== action.payload.id
        //const filteredItems = state.filter((cartItem) => cartItem.id !== action.payload.id);
   }

   return state
}

export default cartItems

被注释掉的两行是我尝试过的其他方法，但最终没有起作用。

Answer 1

此行

return state.filter(cartItem => cartItem.id !== action.payload.id)

意味着“返回一个由所有state个元素组成的新数组，但这些元素具有与id相匹配的action.payload.id属性”。因此，如果有多个具有相同id的项目，则所有这些项目都将被过滤掉。

由于这只是普通的JavaScript，因此您可以在此处使用任何逻辑，只需要返回一个新数组即可。例如，这将仅删除第一个匹配的元素：

let removed = false;
return state.filter(cartItem => {
    if (cartItem.id === action.payload.id && !removed) {
        removed = true;
        return false;
    }
    return true;
});

更好的解决方案是为购物车中的商品创建另一个标识符，以便该操作不会删除列表中的第一个匹配商品，而是删除用户通过单击删除按钮请求删除的商品。

React Native Redux-如何一次删除一项

1 个答案: