React JS购物车问题：数量为0时无法移除商品

你的问题出在使用map方法时，无法直接移除数组元素——map会返回与原数组长度相同的新数组，当你返回item.id !== id（布尔值false）时，只是把false塞进了数组，而不是删掉对应项。要实现数量减到1时点击“-”就移除商品，你可以用以下两种方式修正：

方法一：结合map与filter #

const handleDecrease = (id) => {
  setItems((prevState) => {
    // 先对目标商品数量减1，再过滤掉数量≤0的商品
    return prevState
      .map(item => {
        if (item.id === id) {
          return { ...item, qty: item.qty - 1 };
        }
        return item;
      })
      .filter(item => item.qty > 0);
  });
};

方法二：用reduce直接构建新数组 #

const handleDecrease = (id) => {
  setItems((prevState) => {
    return prevState.reduce((acc, item) => {
      if (item.id === id) {
        // 数量大于1时，添加修改后的商品到新数组
        if (item.qty > 1) {
          acc.push({ ...item, qty: item.qty - 1 });
        }
        // 数量为1时不添加，相当于直接移除
      } else {
        acc.push(item);
      }
      return acc;
    }, []);
  });
};

逻辑说明 #

• 方法一先通过map遍历修改目标商品的数量，再用filter剔除数量失效的商品，逻辑直观易读。
• 方法二用reduce一次遍历完成筛选和修改，避免两次数组遍历，性能更优。

两种写法都能实现：当商品数量从1减至0时，该商品会被彻底从购物车数组中移除，不会出现false元素混入的问题。

内容的提问来源于stack exchange，提问作者reactjs