SetState не обновляет React Native

У меня есть приложение React Native со следующей функцией:

delete(index){
        this.setState({deletedIndex:index, cachedCart:this.state.Cart, Cart: this.state.Cart.splice(index,1) },
            function(){
                console.info(this.state.cachedCart);
                Toast.show({
                text: 'Item deleted from Cart',
                position: 'bottom',
                buttonText: 'Undo',
                duration: 2000,
                onClose: this.undoDelete.bind(this)
            });
        });

    }

Моя проблема в том, что deletedIndex и cachedCart не будут обновляться, если я также обновляю состояние корзины. Однако, если я удалю Cart: this.state.Cart.splice(index,1), все будет работать нормально. Я пробовал использовать жестко запрограммированные значения для deletedIndex и cachedCart, но тоже не работал. Я всегда делаю console.info внутри функции, которая должна запускаться после setState.

вы мутируете тележку. Это проблема, попробуйте неизменяемый способ. (фильтр)

PlayMa256 14.08.2018 02:43
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
112
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы должны иметь возможность решить эту проблему, взяв клон / копию корзины, а не изменяя тот же экземпляр корзины, который вы кэшируете. Один из подходов к этому может быть следующим:

delete(index){

    // Use filter to clone the Cart array instance, while excluding 
    // the cart item that you want to delete (ie at index)
    const newCart = this.state.Cart.filter(function(item, i) { return i !== index });

    this.setState({deletedIndex:index, cachedCart:this.state.Cart, Cart: newCart },
        function(){
            console.info(this.state.cachedCart);
            Toast.show({
            text: 'Item deleted from Cart',
            position: 'bottom',
            buttonText: 'Undo',
            duration: 2000,
            onClose: this.undoDelete.bind(this)
        });
    });

}

Проблема с вашим кодом заключалась в том, что this.state.Cart.splice (index, 1) возвращал удаленный элемент и это значение, которое вы устанавливали как состояние.

  delete(index){
    console.info("state", this.state);
    // Cloning the this.state.cart to updatedCart
    let updatedCart = this.state.cart.slice();
    // Removing the index element
    updatedCart.splice(index,1);
    
    this.setState({deletedIndex:index, cachedCart:this.state.cart, cart: updatedCart },
        ()=>{
          console.info("state", this.state);
    });

}

Другие вопросы по теме