Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16750

Confused to how Async storage works, when setting state

$
0
0

A few weeks ago I used the individual setItem and getItem with async storage methods, however after increasing my code base I changed to multi set / get and am a bit confused, as I no longer setState in my getData(); function. My original singluar code was the following:

Setting the data:

fetchOnPressOpacity = async (item) => {    // console.log(this.state.totalCalories);    this.state.totalCalories += item.food.nutrients.ENERC_KCAL;    try {      this.setState({});      await AsyncStorage.setItem("totalCalories",        JSON.stringify(this.state.totalCalories)      );    } catch (error) {      console.log(error);    }  };

fetching the data:

getData = async () => {    try {      const totalCalories = await AsyncStorage.getItem("totalCalories");      const x = parseInt(totalCalories);      if (totalCalories !== null) {        this.setState({          totalCalories: x,        });      }    } catch (error) {}  };

as you can see I am setting state, however looking at my new code which I will show below, I am no longer setting the state, which is maybe why my code does not work the way I want it to.

Adding numbers to my state / async storage

addMacrosManually = (ProteinInput, FatInput, CarbsInput) => {    let CalsProteinInput = ProteinInput * 4;    let CalsFatInput = FatInput * 9;    let CalsCarbsInput = CarbsInput * 4;    let CalsCalorieInput = CalsCarbsInput + CalsFatInput + CalsProteinInput;    this.setState({      UsedDailyCalories : this.state.UsedDailyCalories+CalsCalorieInput,      UsedDailyFat: +FatInput,      UsedDailyCarbs: +CarbsInput,      UsedDailyProtein: +ProteinInput,      showModal2: false,    });    console.log(this.state.UsedDailyCalories);    const firstPair = ["UsedTotalCalories", JSON.stringify(this.state.UsedDailyCalories)];    const secondPair = ["UsedTotalCarbs", JSON.stringify(this.state.UsedDailyCarbs)];    const thirdPair = ["UsedTotalProtein", JSON.stringify(this.state.UsedDailyProtein)];    const fourthPair = ["UsedTotalFat", JSON.stringify(this.state.UsedDailyFat)];    try {      this.setState({});      var usedValues = [firstPair, secondPair, thirdPair, fourthPair];      AsyncStorage.setItem("DATA_KEY", JSON.stringify(usedValues))    } catch (error) {      console.log(error);    }  };

Retrieving the data (my biggest concern)

 getData = async () => {    try {      AsyncStorage.multiGet(["key1", "key2"]).then(response => {      })    } catch(e) {      // read error

For more information on what I am trying to do, I essentially have two screens. One being a screen where I search a food database and click on the item I want to add to my daily calories etc, and the second screen where I can add calories manually, as well as set my desired calorie goals. At the moment, I am able to move the calories from the food finder screen using props navigation, which allows me to show the added calories on my Macros.js screen. I can then add calories manually, which works fine. However as soon as I go back to the food tracker and go back to the macros.js screen, the calories reset to the calories pressed in the tracker (food finder) and forgets all about the calories I added manually.

The following is in my constructor:

constructor(props) {super(props);this.getData();this.state = {  isLoading: true,  dataSource: null,  totalCalsSet: 0,  showModal: false,  showModal2: false,  UsedDailyCalories: 0,  UsedDailyFat: +this.props.navigation.getParam("totalFat", "nothing sent"),  UsedDailyCarbs: 0,  UsedDailyProtein: 0,  CalsFatInput: 0,  CalsProteinInput: 0,  CalsCarbsInput: 0,  CaloriePercentage: 0,};this.addMacrosManually();let calsTakenFromTracker = this.props.navigation.getParam("totalCal", "nothing sent");this.state.UsedDailyCalories += calsTakenFromTracker;    }  };

Viewing all articles
Browse latest Browse all 16750

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>