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

Question

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

Reducer.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;
  }
};

Action.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 };

Item.js

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

Answer 1

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

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

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