刪除一個總是返回數組最后一項的組件

Question

我正在嘗試刪除一個組件，該組件接收您的 id 作為我的 function deleteCard() 的參數。 該組件包裝在一個數組中，但在觸發 function 時，這始終會刪除數組的最后一項。 我正在使用 map 來渲染我的卡片陣列。

請檢查我的 GitHub 中的代碼。 我正在使用 react Modal 來控制卡片渲染，並從外部文件調用 deleteCard function：

https://github.com/pablolucio97/places-to-know

卡組件：

const Card = ({
    id,
    local,
    countryName,
    countryFlag,
    goalDate,
    openModalDelete,
    openModalEdit
} : countryCardTypes) => {
    return (
            <CardContainer key={id}>
                <TopContainer>
                    <CountryInfoContainer>
                        <ImageFlag src={countryFlag} />
                        <CountryTitle>{countryName}</CountryTitle>
                    </CountryInfoContainer>
                    <ButtonsContainer>
                        <EditButton onClick={openModalEdit}>
                            <MdEdit size={18} color='#333'/>
                        </EditButton>
                        <CloseButton onClick={openModalDelete}>
                            <MdClose size={18} color='#333'/>
                        </CloseButton>
                    </ButtonsContainer>
                </TopContainer>
                <Divider />
                <BottomContainer>
                    <Text>Local: {local}</Text>
                    <Text>Meta: {goalDate}</Text>
                </BottomContainer>
            </CardContainer>
    )
}

export default Card

Function 刪除卡：

  async function deleteCard(id: number){
    await axios.delete(`http://localhost:3333/cards/${id}`)
  }

渲染卡片數組：

  {
          countriesCards?.map(card => (
            <Card
              id={card.id}
              local={card.local}
              goalDate={card.goalDate}
              countryName={card.countryName}
              countryFlag={card.countryFlag}
              openModalEdit={() => { setShowModalEdit(true) }}
              openModalDelete={() => { setShowModalDelete(true) }}
            />
          ))
        }

我的 deleteCard() 刪除觸發此 function 的當前卡怎么辦？

Answer 1

請檢查我的 GitHub 中的代碼。 我正在使用 react Modal 來控制卡片渲染，並從外部文件調用 deleteCard function：

https://github.com/pablolucio97/places-to-know