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

Question

我正在为电子商务目的创建一个React Native应用程序，并试图使购物车功能正常工作。我使用的是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元素组成的新数组，除了具有匹配action.payload.id的 id属性的元素。因此，如果有多个项目具有相同的id，则所有这些都将被过滤出来。

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

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

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