Реагировать-Native-AsyncStorage

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

После использования async и await моя корзина пуста, поскольку я получаю длину массива в соответствии с тем, что он отображается пустым.это функция рендеринга: -

<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 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 при извлечении данных из asyncstorage.

Подробнее: https://facebook.github.io/react-native/docs/asyncstorage.html