从 React 孙组件中删除的问题

Question

我在使用 handleDelete 函数时遇到问题，该函数通过所有必要的道具传递给孙子。

我的组件的结构可以是：Deck > CardSlider > Card 或 Deck > Card，具体取决于用户是在网格视图还是轮播视图中。当我从 Deck -> Card 组件（网格视图）调用 handleDelete 函数时，我能够成功删除卡片，但是当我从 Deck -> CardSlider -> Card 在轮播视图中调用时我无法删除。

当我检查 devtools 时，它显示 DELETE 的 200 状态代码，但实际上并没有删除！

我完全被难住了。有什么想法吗？

async function handleDeleteCard(cardId: number) {
    const newDeck = await deleteCard(deckId, cardId)
    setCards(newDeck.cards);        
}

return (
       <div className="deck">
          
          {view == 'grid' ? 

            <ul className="cards">
              {cards.map((card, cardId) => 
                <li key={cardId}>
                    <Card 
                      card={card}
                      cardBack={cardBack} 
                      cardFront={cardFront}
                      cardId={cardId} 
                      flippedCard={flippedCard} 
                      handleDeleteCard={handleDeleteCard} 
                      handleFlip={handleFlip} 
                      mode={mode}
                      view={view}
                    />
                </li>)}
            </ul> 
            :
            <CardSlider 
              cards={cards}
              cardBack={cardBack} 
              cardFront={cardFront} 
              flippedCard={flippedCard}  
              handleFlip={handleFlip} 
              handleDeleteCard={handleDeleteCard} 
              mode={mode} 
              view={view}
            />
          }
)

我尝试从 CardSlider 组件向 Card 组件传递所有必要的道具以删除卡片，当我从 handleDelete 函数登录时，我看到要删除的正确卡片 ID 和牌组 ID，但它实际上并没有被删除