I am using a stack Navigator, my main screen is tracker.js, and a second screen macros.jsOn macros.js I can add nutritional macros (calories, Fats, Carbs, Protein) manually, and add it to my UsedDailyCalories. However when I go back to my tracker.js, which is automatically got 0 calories and I return to macros.js, the value goes back down to 0. And I am not sure why async storage is not working. Here is my code:
import React from "react";import { StyleSheet, View, Button, Text, TextInput, Modal, Animated,} from "react-native";import { TouchableOpacity } from "react-native-gesture-handler";import AsyncStorage from "@react-native-community/async-storage";import {useDispatch} from "react-redux";export default class Macros extends React.Component { static navigationOptions = { title: "My Macros", }; 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, }; let calsTakenFromTracker = this.props.navigation.getParam("totalCal", "nothing sent"); this.state.UsedDailyCalories += calsTakenFromTracker; } setMacroGoalModal = () => { this.setState({ showModal: true, }); }; AddMacrosModal = () => { this.setState({ showModal2: true, }); }; addMacrosManually = (ProteinInput, FatInput, CarbsInput) => { let CalsProteinInput = ProteinInput * 4; let CalsFatInput = FatInput * 9; let CalsCarbsInput = CarbsInput * 4; let CalsCalorieInput = CalsCarbsInput + CalsFatInput + CalsProteinInput; let withAddedCalories = this.state.UsedDailyCalories + CalsCalorieInput; this.setState({ UsedDailyCalories :withAddedCalories, 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); } }; setMacros = async (ProteinInput, FatInput, CarbsInput) => { let CalsProteinInput = ProteinInput * 4; let CalsFatInput = FatInput * 9; let CalsCarbsInput = CarbsInput * 4; let totalCalsSet = CalsCarbsInput + CalsFatInput + CalsProteinInput; let CaloriePercentage = (totalCalsSet / 2400) * 100; this.setState({ totalCalsSet: totalCalsSet, CalsProteinInput: ProteinInput, CalsFatInput: FatInput, CalsCarbsInput: CalsCarbsInput, showModal: false, CaloriePercentage: CaloriePercentage, }); console.log(totalCalsSet); const firstPair = ["totalCalsSet", JSON.stringify(this.state.totalCalories)]; const secondPair = ["totalCarbsSet", JSON.stringify(CarbsInput)]; const thirdPair = ["totalProteinSet", JSON.stringify(ProteinInput)]; const fourthPair = ["totalFatSet", JSON.stringify(FatInput)]; try { this.setState({}); var setValues = [firstPair, secondPair, thirdPair, fourthPair]; AsyncStorage.setItem("DATA_KEY", JSON.stringify(setValues)) } catch (error) { console.log(error); } }; getData = async () => { try { AsyncStorage.multiGet(["key1", "key2"]).then(response => { }) } catch(e) { // read error } }; render() { const { navigate } = this.props.navigation; let CaloriePercentage = this.state.CaloriePercentage +"%"; return ( //styling for navigation container<View style={styles.container}><View style={styles.topStyle}><Text>{this.state.UsedDailyCalories} </Text><Text>{this.state.UsedDailyCarbs} </Text><View style={styles.setMacros}><TouchableOpacity onPress={() => this.setMacroGoalModal()}><Text> Set Daily Macro Goal </Text></TouchableOpacity></View><View><TouchableOpacity style={styles.setMacros} onPress={() => this.AddMacrosModal()}><Text> add Daily Macro Goal </Text></TouchableOpacity></View><View style={styles.viewOfMacros}><Text>Cals: {this.state.totalCalsSet}</Text><Text>{Math.floor(this.state.CaloriePercentage)}%</Text><View style={styles.progressBar}><Animated.View style={ ([StyleSheet.absoluteFill], { backgroundColor: "#8BED4F", width: CaloriePercentage }) } /></View><Text>Fat: {this.state.CalsFatInput}</Text><Text>Carbs: {this.state.CalsCarbsInput}</Text><Text>Protein: {this.state.CalsProteinInput}</Text></View><View>