时间戳

首页 > 解决方案 > React Native Redux - 如何一次删除一项

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

问题描述

我正在为电子商务目的创建一个反应本机应用程序，并试图让购物车功能正常工作。我正在使用 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

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

标签： react-nativeredux

解决方案

这条线

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

表示“返回一个新数组，该数组由state除具有id属性匹配的元素之外的所有元素组成action.payload.id”。因此，如果有多个项目具有相同的id，则所有 f 都将被过滤掉。

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

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

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

推荐阅读