Как получить актуальное состояние массива

Question

Как получить актуальное состояние массива

Рейтинг: 0Ответов: 0Опубликовано: 21.02.2023

Изучаю Реакт на практике и на данный момент очень сильно застрял.

Проект содержит компонент FlashCardsSection (родительский).

export const FlashCardsSection = () => {
    const [cardsList, setCardsList] = useState([]);
    const cardAddition = (item) => {
        setCardsList(() => [item, ...cardsList]);
    };
    const handlerDeleteCard = (cardsList) => {
        console.log(cardsList);
    };
    return (
        <section className = "cards-section">
            <div className = "addition-card-block">
                <PopUpOpenBtn cardAddition={cardAddition} cardsList={cardsList} 
                  handlerDeleteCard = {handlerDeleteCard}
                />
            </div> 
            <CardsBlock cardsList={cardsList}/>
        </section>
    )
};

В "PopUpOpenBtn" есть компонент AddFlashCardBtn, который добавляет компонент CreatedFlashCard в свойство cardsList с помощью функции cardAddition. Каждый компонент CreatedFlashCard содержит компонент FlashCardRemoveBtn.

Я пытаюсь реализовать функцию, которая удаляет карту, в которой произошло нажатие на компонент FlashCardRemoveBtn, который вызывает функцию handlerDeleteCard.

Мне нужна актуальная версия массива при нажатии на FlashCardRemoveBtn любой карточки, но я получаю:

При нажатии на первую карту - пустой массив.
На вторую карту - массив с одним элементом.
На третью - массив с двумя элементами.

И т. д., т.е. предыдущую версию массива. PopUpOpenBtn содержит промежуточные компоненты, которые связанных с созданием и добавлением flashcard, поэтому я передал свойства cardsList, handlerDeleteCard через все в FlashCardRemoveBtn.

export const FlashCardRemoveBtn = (props) => {
let {handlerDeleteCard, cardsList} = props;

return(
    <button className = "remove-btn" onClick={() => {
        handlerDeleteCard(cardsList);
        }}>Remove
    </button>  
)};

Компонент, который рендерит FlashCardRemoveBtn:

export const CreatedFlashCardFrontSide = (props) => {
    let {meaningsList, cardsList, handlerDeleteCard} = props;
    return(
        <div className = {`created-flash-card-front-side  color-side-${cardsList.length+1}`}>
            <div className="card-content">
                <div className="card-fncs">
                    <div className="card-remove-fnc">
                       <FlashCardRemoveBtn  cardsList={cardsList} handlerDeleteCard={handlerDeleteCard}/>
                    </div>
                </div>
                <div className = "flash-card-img-container">
                    <FlashCardImg/>
               
                </div>
                <div className="card-txt">
                    {meaningsList}
                </div>
            </div>
        </div>
    )
};

export const AddFlashCardBtn = (props) => {
    let {cardAddition, cardsList, meaningsList, meaningsListBack, wipeMeaningList, wipeMeaningListBack, handlerDeleteCard} = props;

    return(
       <div className = "add-flash-card-btn-container">
            <button className = "add-flash-card-btn" onClick={() => {
                cardAddition(<CreatedFlashCard  cardsList = {cardsList} meaningsList={meaningsList} handlerDeleteCard = {handlerDeleteCard} meaningsListBack = {meaningsListBack} key={cardsList.length+1} />)
}}>
                Create
            </button>
       </div> 
    )
};

reactjs

Источник: Stack Overflow на русском

Как получить актуальное состояние массива

Ответы