时间戳

首页 > 解决方案 > 更改 AsyncStorage 项 REACT NATIVE 的数据

reactjs - 更改 AsyncStorage 项 REACT NATIVE 的数据

问题描述

我正在一个 Android 应用程序中构建一个购物车。我被困在删除购物车上的物品上。我的系统很简单。当有人在购物车上添加东西时：一个对象首先存储在 AsyncStorage 中。然后在我的购物车组件中，我也使用 AsyncStorage 获取项目。这个项目被称为“购物车”。

在我的购物车视图中，我有每件商品的图片、价格和数量。两个按钮允许用户修改每个项目的数量。但我在删除该项目时遇到了困难。我使用 slice 使项目消失，但它只是从我的购物车组件中消失，并且该项目仍在 AsyncStorage 上，因此每次我刷新购物车组件时，使用切片删除的项目都会通过函数 GetItem 重新出现。

所以我试图从 AsyncStorage 和我的购物车组件中删除该对象。这是我的 AssyncStorage 商品购物车：

onClickAddCart(data){

    const itemcart = {
      food: data,
      quantity:  1,
      price: data.price
    }

    AsyncStorage.getItem('cart').then((datacart)=>{
        if (datacart !== null) {
          // We have data!!
          const cart = JSON.parse(datacart)
          cart.push(itemcart)
          AsyncStorage.setItem('cart',JSON.stringify(cart));
        }
        else{
          const cart  = []
          cart.push(itemcart)
          AsyncStorage.setItem('cart',JSON.stringify(cart));
        }
        alert("Add Cart")
      })
      .catch((err)=>{
        alert(err)
      })
  }

}

这是我的获取项目

componentDidMount(){
AsyncStorage.getItem('cart').then((cart)=>{
  if (cart !== null) {
    const cartfood = JSON.parse(cart)
    this.setState({dataCart:cartfood})
  }
})
.catch((err)=>{
  alert(err)
})

}

这是我的购物车系统

onChangeQuat(i, type){
        const cart = this.state.dataCart
        let cant = cart[i].quantity;

        if(type){
            cant = cant + 1
            cart[i].quantity = cant
            this.setState({
                dataCart:cart
            })
        }
        else if (type == false&&cant>=2){
            cant = cant -1
            cart[i].quantity = cant
            this.setState({
                dataCart:cart
            })
        }
        else if (type==false&&cant==1){
            AsyncStorage.setItem(cart, JSON.stringify({quantity: null }));
            cart.splice(i,1)
            this.setState({
                dataCart:cart
            })
        }
    }

我得到的错误是：“您尝试将键'0'设置为值......”数量“：1......在一个本应是不可变且已被冻结的对象上。

标签： reactjsreact-nativereact-native-androidcartasyncstorage

解决方案

您可以使用 AsyncStorage.setItem() 和 AsyncStorage.mergeItem() 的组合来使用购物车项目更新购物车。

removeCartItem = async (index) => {
    try {
        const cart = await AsyncStorage.getItem('cart');
        let cartItems = JSON.parse(cart);
        const updatedCartItems = cartItems.filter(function (e, itemIndex) { return itemIndex !== index });

        await AsyncStorage.setItem('cart', JSON.stringify(updatedCartItems));
        await AsyncStorage.mergeItem('cart', JSON.stringify(updatedCartItems));

    } catch (error) {
        console.log('error: ', error);
    }
};

推荐阅读