React-Native-AsyncStorage
I am using async storage to store the values, but while retrieving it is overriding the values which i saved previous it is not showing. while getting data only latest record is showing. i have some buttons in flat list on every click i am storing data in an array, and i want to retrieve all data but it shows only latest record.
First.js - сохранить данные
saveData= async (item)=>{
console.info("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.info("item added" +JSON.stringify(product)));
alert("item added to cart")
}
})
}
catch(error)
{
alert(eror)
}
}
Получение данных-
componentWillMount(){
AsyncStorage.getItem("Cart",(err,res)=>{
console.info("res value is------" +JSON.stringify(res))
if (!res)
{
alert("your cart is empty")
}
else{
this.setState({cartItems:JSON.parse(res)},
console.info(JSON.stringify(this.state.cartItems))),
alert(JSON.stringify("get Cart items"+JSON.stringify(this.state.cartItems)));
}
});
}
_renderItem({item}){
console.info("we are in _renderItem function" )
console.info(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>
);
});
}
Ответы 3
используйте async и await при извлечении данных из asyncstorage.
подробнее: https://facebook.github.io/react-native/docs/asyncstorage.html
@NishantMathur попробуйте поместить getItem в одну константу без какой-либо функции, как вы в настоящее время делаете, ваша константа будет заполнена возвращаемым значением, когда вы получите элемент из своего asyncstorage, проверьте, равно ли значение null ниже и после asyncstorage get item
Сэр, на самом деле поступают только отдельные данные, но не отображаются предыдущие сохраненные элементы, м, не могли бы вы дать мне пример или код
Сэр, как вы сказали, я сделал такое же значение в строке, и я сравниваю с нулевыми данными, но сэр, я также хочу отобразить в списке, пожалуйста, скажите мне, как я могу это сделать? заранее спасибо
поместите возвращаемое значение в состояние, и список, который вы хотите отобразить, будет иметь источник данных этого состояния, при этом, когда вы обновляете состояние, список будет автоматически повторно отображен. я попробую сделать для тебя пример из игры @NishantMathur
это мое состояние сохранения каждого элемента, который я помещаю в массив, например, мы добавляем элемент в корзину, поэтому при извлечении он показывает только один элемент только потому, что каждый раз элемент вставляется в массив на консоли, но не извлекается. Я загружаю свой код сохранения состояния.
После использования async и ожидания моя корзина пуста, так как я получаю длину массива в соответствии с тем, что он отображается пустым. это функция рендеринга: -
<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.info("res value is------" +JSON.stringify(res))
if (value==null)
{
alert("your cart is empty")
}
else{
this.setState({cartItems:JSON.parse(res)},
console.info(JSON.stringify(this.state.cartItems))),
alert(JSON.stringify("get Cart items"+JSON.stringify(this.state.cartItems)));
}
});
}
здесь мне нужен список данных, которые добавляет пользователь: -
_renderItem=({item})=>{
console.info("we are in _renderItem function" )
console.info(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>
)
}
Sava data items:-
saveData (item){
console.info("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.info("item added" +JSON.stringify(product)));
alert("item added to cart")
console.info(product);
}
})
}
catch(error)
{
alert(eror)
}
}
Я добавил async и await, но теперь моя корзина пуста, показывая, что я обновил свой код, пожалуйста, проверьте его.