为何仅减少卡片数量时状态更新正常，删除卡片却无效？

核心问题1：filter方法的结果未赋值 #

原代码中，当quantity==0时调用了updatedCards.filter(...)，但filter是纯函数，不会修改原数组，只会返回一个新的过滤后数组。你没有把这个新数组赋值给updatedCards，所以updatedCards还是最初的拷贝数组，没有任何元素被移除，调用setState后状态自然不会变化，卡片也就不会消失。

核心问题2：可能混淆了数组索引与卡片ID #

原代码中使用updatedCards[cardId]来访问元素，这里隐含了一个假设：cardId是数组的下标索引。但通常业务中cardId是卡片的唯一标识（比如后端返回的id），和数组下标无关。如果是这种情况，updatedCards[cardId]会访问到错误的元素（甚至是undefined），导致quantity==0的判断逻辑根本不生效。

修正后的代码示例 #

情况1：cardId是卡片的唯一ID（推荐） #

handleDelete = cardId => {
  const updatedCards = [...this.state.cards];
  // 先找到对应卡片的索引
  const cardIndex = updatedCards.findIndex(card => card.id === cardId);
  if (cardIndex === -1) return; // 没找到就直接返回

  if (updatedCards[cardIndex].quantity === 0) {
    // 过滤掉该卡片，将结果赋值给updatedCards
    updatedCards = updatedCards.filter(card => card.id !== cardId);
  } else {
    // 减少quantity，注意要创建新对象避免直接修改原状态
    updatedCards[cardIndex] = {
      ...updatedCards[cardIndex],
      quantity: updatedCards[cardIndex].quantity - 1
    };
  }
  this.setState({ cards: updatedCards });
};

情况2：cardId是数组下标索引 #

handleDelete = cardIndex => {
  const updatedCards = [...this.state.cards];
  if (updatedCards[cardIndex].quantity === 0) {
    // 过滤掉对应下标的元素，赋值回updatedCards
    updatedCards = updatedCards.filter((_, index) => index !== cardIndex);
  } else {
    // 同样要创建新对象修改quantity
    updatedCards[cardIndex] = {
      ...updatedCards[cardIndex],
      quantity: updatedCards[cardIndex].quantity - 1
    };
  }
  this.setState({ cards: updatedCards });
};

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