Trouble calling or assigning variable value in React Native Class

Question

I have the following class in React Native. As can be seen I have some defined 'state' variables and a 'componentDidMount' call which is designed to retrieve previously stored variables using the 'AsyncStorage' tool.

export default class Cast extends Component {
state = {
  admin: false,
  isPublishing: false,
  userComment: "",
  hasPermission: false,
  paused: true,
  _email: false,
  _name: false,
  _pword: false,
};


getKey = async() => {
  try {
    var value = await AsyncStorage.getItem('email');
console.log("value variable AFTER getKey: " + value);
    this.setState({ _email: value });
  } catch (error) {
    console.log("Error retrieving data" + error);
  }
}

componentDidMount(){
  this.getKey();
}

onPressBtn = () => {
console.log("EMAIL value variable AFTER getKey: " + this.state._email)  //this should show the value AFTER the retrieval from storage...correct?
};

//...

The console.log statement following the 'AsyncStorage.getItem' successfully displays the variable "value" as being retrieved from the storage (example "[email protected]"). However I am greatly confused on how to assign this variable and display it. The "this.setState({ _email: value });" is either not functional or I am using incorrect syntax to display the value for the "_email" variable. I have attempted the following:

console.log("_email variable AFTER getKey: " + _email);
console.log("_email variable AFTER getKey: " + this._email);
console.log("_email variable AFTER getKey: " + {_email});
console.log("_email variable AFTER getKey: " + this.state._email);

None of the above correctly return the value of the "_email" variable. What am I doing wrong here? Is the 'setState' assignment not correct...? I simply want to retrieve any values that are in storage (as "value") and then assign them to the appropriate variables defined in the 'state'. Any advice greatly appreciated. I thank you in advance.

Answer 1

It depends on when you have tried to access the state variable. If you did the following:

getKey = async() => {
  try {
    var value = await AsyncStorage.getItem('email');
    console.log("value variable AFTER getKey: " + value);
    this.setState({ _email: value });
    console.log(this.state._email)
  } catch (error) {
    console.log("Error retrieving data" + error);
  }
}

Then, this will print false, which is the default in your state. Setting the state will cause a rerender. The new value will be available afterwards.

Consider the following snippet.

getKey = async () => {
    try {
      var value = "test"
      console.log("value variable AFTER getKey: " + value)
      this.setState({ _email: value })
    } catch (error) {
      console.log("Error retrieving data" + error)
    }
  }

 ...

  render() {
    console.log("HELLO VALUE", this.state._email)
    return <></>
  }

We will notice the following outputs printed to the console.

LOG  HELLO VALUE false
LOG  value variable AFTER getKey: test
LOG  HELLO VALUE test