React-Native-AsyncStorage

Question

我正在使用异步存储来存储值，但是在检索它时会覆盖我之前保存的值，但它没有显示。 在获取数据时仅显示最新记录。 每次单击时，我都会在平面列表中有一些按钮我将数据存储在一个数组中，我想检索所有数据，但它只显示最新记录。

First.js - 保存数据

saveData= async (item)=>{
console.log("We are in SAve function")

try{
var product= [];
var items={
    id: item.id,
    title: item.title,
    image: item.image,
    price: item.price,
    description:item.description,
    categoryTitle: item.categoryTitle,
  }

  AsyncStorage.getItem("Cart",(err,res)=>{
    if(!res){
      alert("empty cart")
      AsyncStorage.setItem("Cart",JSON.stringify([product]))
    }
    else{

     product.push(items);

      AsyncStorage.setItem("Cart",JSON.stringify(product),
      console.log("item added" +JSON.stringify(product)));
      alert("item added to cart")
    }
  })
}
catch(error)
{
    alert(eror)
}

}

获取数据-

 componentWillMount(){
  AsyncStorage.getItem("Cart",(err,res)=>{
      console.log("res value is------" +JSON.stringify(res))
      if(!res)
      {
          alert("your cart is empty")
      }
      else{

        this.setState({cartItems:JSON.parse(res)},
         console.log(JSON.stringify(this.state.cartItems))),

        alert(JSON.stringify("get Cart items"+JSON.stringify(this.state.cartItems)));

      }
  });

}

 _renderItem({item}){
  console.log("we are in _renderItem function"  )

     console.log(item.id)


        return  this.state.cartItems.map((item,id) =>{


            return(
            <View style={{flex:1, flexDirection:'row'}}>

             <Image style={{height:90,width:90}} source= {{uri: item.image}} />
            <View style={{flexDirection:'column'}}> 
             <Text>  {item.id} </Text>   
             <Text>  {item.title} </Text>  
              <Text> {item.categoryTitle} </Text>  


            </View>

             </View>
            );
        });

 }

Answer 1

Sava 数据项：-

 saveData (item){
console.log("We are in SAve function")

try{
var product= [];

var items={
    id: item.id,
    title: item.title,
    image: item.image,
    price: item.price,
    description:item.description,
    categoryTitle: item.categoryTitle,
  }

     AsyncStorage.getItem("Cart",(err,res)=>{
     if(!res){
     alert("empty cart")
     AsyncStorage.setItem("Cart",JSON.stringify([product]))
     }
     else{

     product.push(items);          
     AsyncStorage.setItem("Cart",JSON.stringify(product),
     console.log("item added" +JSON.stringify(product)));
     alert("item added to cart")
     console.log(product);

  }
  })
}
catch(error)
{
    alert(eror)
}

}

Answer 2

使用异步并等待后，我的购物车显示为空，因为我正在获取数组的长度，因为它显示为空。 这是渲染函数：-

<View>

           {this.state.cartItems.length<=0 ?

            <View style={{justifyContent:'center',alignItems:'center'}}>

                <Text> cart is empty</Text>

            </View>    

             :


             <View>

             <FlatList
             extraData={this.state}
              data={this.state.cartItems}
              renderItem={this._renderItem}

              keyExtractor={(item,index)=> item}


             />

         </View>    

使用 async 和 await 后：-

componentWillMount= async ()=>{
 const value= await AsyncStorage.getItem("Cart",(err,res)=>{
      console.log("res value is------" +JSON.stringify(res))
      if(value==null)
      {
          alert("your cart is empty")
      }
      else{

        this.setState({cartItems:JSON.parse(res)},
         console.log(JSON.stringify(this.state.cartItems))),

        alert(JSON.stringify("get Cart items"+JSON.stringify(this.state.cartItems)));

      }
  });

}

这里我想要用户添加的数据列表：-

 _renderItem=({item})=>{
  console.log("we are in _renderItem function"  )

     console.log(item.id)



      return(


        <View style={{flex:1, flexDirection:'row'}}>

        <Image style={{height:90,width:90}} source= {{uri: item.image}} />

       <View style={{flexDirection:'column'}}> 
        <Text>  {item.id} </Text>   
        <Text>  {item.title} </Text>  
         <Text> {item.categoryTitle} </Text>  


       </View>

        </View>
      )




    }     

Answer 3

在从异步存储中检索数据时使用 async 和 await。

阅读更多：https://facebook.github.io/react-native/docs/asyncstorage.html