Question

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

First.js -save data

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

使用异步并等待我的购物车是空的显示，因为我得到数组的长度，因为它显示为空。这是渲染功能： -

<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并等待： -

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 2

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 3

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

了解详情：https://facebook.github.io/react-native/docs/asyncstorage.html

反应 - 本机AsyncStorage

3 个答案: