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; } };