时间戳

首页 > 解决方案 > 从数组中删除一个项目后，它会删除所有重复的条目 - Redux

javascript - 从数组中删除一个项目后，它会删除所有重复的条目 - Redux

问题描述

我正在使用 react-redux 制作购物车应用程序，但遇到了问题。我列表中的每个项目都有一个 ID ，但是当我添加 2 个具有相同 ID 的项目然后我突然将它们从购物车中删除时，所有具有相同 id 的项目（也就是重复的项目都被删除了。代码如下。

减速器.js

   const reducer = (state = { items: [] }, { type, payload }) => {
  console.log(payload);
  switch (type) {
    case "ADD_ITEM":
      return {
        ...state,
        items: [...state.items, payload]
      };
    case "REMOVE_ITEM":
      const index = payload.index;
      return {
        ...state,
        items: state.items.filter(({ id }) => id !== payload.id)
      };

    case "DUPLICATE_ITEM":
      return {
        ...state
      };
    default:
      return state;
  }
};

动作.js

const addItem = item => ({
  type: "ADD_ITEM",
  payload: item
});

const removeItem = (item) => ({
  type: "REMOVE_ITEM",
  payload: item
});

const duplicateItem = () => ({
  type: "DUPLICATE_ITEM"
});

export { addItem, removeItem, duplicateItem };

项目.js

const items = [
  {
    id: 1,
    name: "projectile",
    price: "150$",
    units: 0
  },
  {
    id: 2,
    name: "cute cat",
    price: "1250$",
    units: 0
  }]

标签： javascriptreduxreact-redux

解决方案

在我看来，这个问题更像是一个设计问题，即不是将 N 个相同的物品添加到购物车中，如果它已经存在，您可能想要增加该物品的单位/数量？然后当你删除时，减少单位/数量，直到它减少到 1，然后删除。

如果您希望行为按原样工作，则需要更改从购物车中删除的方式，例如

  • 按索引而不是按 ID 删除
  • 将项目添加到购物车时为项目创建代理 ID，然后通过此删除

推荐阅读