删除一个总是返回数组最后一项的组件

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