Removing item is not working after refreshing page

Question

so here i have my cart page that has 2 items ordered after getting them from order page using asyncstorage

im trying to remove one of them by decrementing the item quantity until it reaches 0

here is my code :

    constructor(props) {
        super(props);
        this.state = {
            dataCart: [],
        };
    }
    componentDidMount(){
        try {
            AsyncStorage.getItem('STORAGE_Data').then((cart) => {
                if (cart !== null) {
                    const cartfood = JSON.parse(cart)
                    console.log(cart)
                    this.setState({ dataCart: cartfood })
                    console.log(JSON.stringify(this.state.dataCart))
                }
            })
        }
        catch (error) {
            console.log(error)
        }
    }
    onChangeQual(i, type) {
        const dataCar = this.state.dataCart
        let cantd = dataCar[i].Quantity;

        if (type) {
            cantd = cantd + 1
            dataCar[i].Quantity = cantd
            this.setState({ dataCart: dataCar })
        }
        else if (type == false && cantd >= 2) {
            cantd = cantd - 1
            dataCar[i].Quantity = cantd
            this.setState({ dataCart: dataCar })
        }
        else if (type == false && cantd == 1) {
            dataCar.splice(i, 1)
            this.setState({ dataCart: dataCar })
            alert("item removed !")
        }

    }
        render() {
        return (
                    {

                        this.state.dataCart.map((item, i) => {
                          

                            return (

                                <View style={styles.rectangle} key={i}>
                                    <Image style={{ width: normalize(200), height: normalize(64), alignSelf: 'center', marginLeft: normalize(-40) }} source={require("../assets/Tacos-M.png")}></Image>
                                    <View>
                                            <Text style={{ alignSelf: 'center', fontSize: normalize(17), marginTop: normalize(10) }} key={i}>{item.Viande}</Text>
                                            <View style={{ flexDirection: 'row', alignSelf: 'center', marginTop: normalize(50) }}>

                                                <TouchableOpacity onPress={() => this.onChangeQual(i,false)}>
                                                    <Ionicons name="remove-circle" color={'#D05A0B'} size={normalize(50)} style={styles.btnMoin} />
                                            </TouchableOpacity>
                                            <Text style={{ fontSize: normalize(15), marginLeft: normalize(15) }}>{item.Quantity}</Text>
                                            <TouchableOpacity onPress={() => this.onChangeQual(i, true)} >
                                                <Ionicons name="add-circle" color={'#D05A0B'} size={normalize(50)} style={styles.btnPlus} />
                                            </TouchableOpacity>
                                        </View>
                                    </View>
                                    <View>
                                        <TouchableOpacity><Feather name="x" color={'#D05A0B'} size={25} style={{ alignSelf: 'flex-start', marginTop: normalize(20), marginLeft: normalize(40), }} /></TouchableOpacity>
                                        <Text style={{ fontSize: normalize(15), alignSelf: 'center', marginTop: normalize(27), marginLeft: normalize(35) }}>14 DT</Text>
                                    </View>
                                </View>
                            )
                        })
                    }


        );
    }

The problem is when i remove an item everything looks good in the beggining ,i can see the item is removed for now

but when i refresh the page it appears again by its self

is there any solution for this ?

Answer 1

The problem is, even though you update your state, you are not updating AsyncStorage while doing so. As per my understanding every action you perform in the cart should be updated in AsyncStorage.

It's best to write a method to update the cart as follows :

updateCart(cart){
  //Update async storage here with AsyncStorage.setItem
  this.setState({ dataCart: cart });
}

When it goes in your code :

constructor(props) {
        super(props);
        this.state = {
            dataCart: [],
        };
    }
    componentDidMount(){
        try {
            AsyncStorage.getItem('STORAGE_Data').then((cart) => {
                if (cart !== null) {
                    const cartfood = JSON.parse(cart)
                    console.log(cart)
                    this.setState({ dataCart: cartfood })
                    console.log(JSON.stringify(this.state.dataCart))
                }
            })
        }
        catch (error) {
            console.log(error)
        }
    }
    updateCart(cart){
       //Update async storage here with AsyncStorage.setItem
       this.setState({ dataCart: cart });
    }
    onChangeQual(i, type) {
        const dataCar = this.state.dataCart
        let cantd = dataCar[i].Quantity;

        if (type) {
            cantd = cantd + 1
            dataCar[i].Quantity = cantd
            updateCart(dataCar);
        }
        else if (type == false && cantd >= 2) {
            cantd = cantd - 1
            dataCar[i].Quantity = cantd
            updateCart(dataCar);
        }
        else if (type == false && cantd == 1) {
            dataCar.splice(i, 1)
            updateCart(dataCar);
            alert("item removed !")
        }

    }
        render() {
        return (
                    {

                        this.state.dataCart.map((item, i) => {
                          

                            return (

                                <View style={styles.rectangle} key={i}>
                                    <Image style={{ width: normalize(200), height: normalize(64), alignSelf: 'center', marginLeft: normalize(-40) }} source={require("../assets/Tacos-M.png")}></Image>
                                    <View>
                                            <Text style={{ alignSelf: 'center', fontSize: normalize(17), marginTop: normalize(10) }} key={i}>{item.Viande}</Text>
                                            <View style={{ flexDirection: 'row', alignSelf: 'center', marginTop: normalize(50) }}>

                                                <TouchableOpacity onPress={() => this.onChangeQual(i,false)}>
                                                    <Ionicons name="remove-circle" color={'#D05A0B'} size={normalize(50)} style={styles.btnMoin} />
                                            </TouchableOpacity>
                                            <Text style={{ fontSize: normalize(15), marginLeft: normalize(15) }}>{item.Quantity}</Text>
                                            <TouchableOpacity onPress={() => this.onChangeQual(i, true)} >
                                                <Ionicons name="add-circle" color={'#D05A0B'} size={normalize(50)} style={styles.btnPlus} />
                                            </TouchableOpacity>
                                        </View>
                                    </View>
                                    <View>
                                        <TouchableOpacity><Feather name="x" color={'#D05A0B'} size={25} style={{ alignSelf: 'flex-start', marginTop: normalize(20), marginLeft: normalize(40), }} /></TouchableOpacity>
                                        <Text style={{ fontSize: normalize(15), alignSelf: 'center', marginTop: normalize(27), marginLeft: normalize(35) }}>14 DT</Text>
                                    </View>
                                </View>
                            )
                        })
                    }


        );
    }