如何将 AsyncStorage 保存到 React Native 中的状态

问题描述

我是 React Native 的新手，我正在开发一个餐厅应用.我想实现一个购物篮！顾客选择食物并将食物添加到购物篮中.

I'm new in the react native and I'm developing a restaurant app. and I want to implement a buy basket! The customers select foods and foods add to the basket.

现在我想将每种食物及其属性保存在 AsyncStorage 中，并将其放入篮子组件中.我的食物及其属性是食物名称、食物 ID、食物数量和食物成本.每个食物的关键是食物名称.(AsyncStorage 的键).

Now I want to save each food and its properties in a AsyncStorage and get that in the basket component. my food and its properties are food name, food id, food count and food cost. the key for each food is food name. (key for AsyncStorage).

我想将食物数组保存在 AsyncStorage 中，并将其放入篮子组件中，然后将 AsyncStorage 保存到状态.这是我在 AsyncStorage 中保存数组的代码:

I want to save the food array in the AsyncStorage and get that in a basket component and then save AsyncStorage to state.this is my code for saving array in the AsyncStorage :

var key=this.state.myfoodName;
var info=[{id : myid,foodName : myfoodName, count : mycount, cost: mycost}];
var myjson=await JSON.stringify(info);
    await AsyncStorage.setItem(key , myjson);

并且在篮子组件中，我想将 AsyncStorage 保存到状态中！这样做的代码是:

and in the basket component, I want to save the AsyncStorage into the state!and the code for do that is:

componentDidMount(){
    AsyncStorage.getAllKeys((err, keys) => {
        keys.map((key,keys)=>{
            AsyncStorage.getItem(key,(error,result)=>{
                    let myresult= JSON.parse(result);
                    console.warn(myresult);  // each key is a food that customer has added to the basket.and i want to save each that to the state.
                    this.setState({

                    baskets: myresult
                    });


            });

            })});

篮子状态是:

baskets:[{
            id:'',
            foodName:'',
            count:0,
            cost:''
        }]

在平面列表中，我显示篮子状态.

and in a flatlist, I display baskets state.

问题:

1-当我运行此代码时，我看不到购物车列表！现在我想知道我哪里出错了?我认为我的数组不正确.

1-when I run this code I can't see the basket list! now I want to know where I have a mistake? I think my array was not correct.

2-我无法将所有异步存储保存到篮子状态.我怎样才能做到这一点?例如，我们的客户将 2 种食物添加到篮子中.如何将所有食物保存在篮子状态然后显示?

2-I can't save all of asyncstorages to the baskets state. how can I do that?for example our customer adds 2 foods to the basket. how can I save all of foods in the baskets state and then display that?

提前致谢.

推荐答案

您可以拥有一个名为数组类型的篮子键.在购物篮中添加商品:-

You can have a key named basket of type array.To add an item in basket:-

1. 从 asyncstorage 中获取篮子数组.
2. 将项目推送到篮子数组.
3. 更新 asyncstorage 中的篮子数组.

async addItemToBasket(item) {
  let basketItems = await this.getBasketItems();
  console.log("Current basket", basketItems);
  basketItems.push(item);
  console.log("Updated basket", basketItems);
  await AsyncStorage.setItem(
    "basket",
    JSON.stringify(basketItems)
  );
}

async getBasketItems() {
  let currentBasket = await AsyncStorage.getItem("basket");
  console.log("currentBasket", currentBasket);
  return currentBasket ? JSON.parse(currentBasket) : [];
}

// calling addItemToBasket to add item.
this.addItemToBasket({
  id: "345",
  foodName: "pizza",
  count: 1,
  cost: "150"
});

this.addItemToBasket({
  id: "346",
  foodName: "Burger",
  count: 2,
  cost: "100"
});


// calling getBasketItems
componentDidMount() {
  this.getBasketItems()
  .then((basket)=> this.setState({basket: basket}))
   /* here basket will be:
     [{ id: "345",
        foodName: "pizza",
        count: 1,
        cost: "150"
      },
      {
        id: "346",
        foodName: "Burger",
        count: 2,
        cost: "100"
      }]
    */
}

这篇关于如何将 AsyncStorage 保存到 React Native 中的状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！