У меня есть приложение 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.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы должны иметь возможность решить эту проблему, взяв клон / копию корзины, а не изменяя тот же экземпляр корзины, который вы кэшируете. Один из подходов к этому может быть следующим:
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);
});
}
вы мутируете тележку. Это проблема, попробуйте неизменяемый способ. (фильтр)