Удалить компонент, всегда возвращающий последний элемент массива

Я пытаюсь удалить компонент, получающий ваш идентификатор в качестве параметра для моей функции deleteCard (). Этот компонент заключен в массив, но при срабатывании функции он всегда удаляет последний элемент массива. Я использую карту для рендеринга своего массива карточек.

Пожалуйста, проверьте код в моем GitHub. Я использую React Modal для управления рендерингом карт, а функция deleteCard вызывается из внешнего файла:

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

Функция удаления карты:

  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 () удаляет текущую карту, которая запускает эту функцию?

Источник
  • 0
    откуда вы вызываете эту функцию - deleteCard?
Codelisting
Codelisting
Популярные категории
На заметку программисту