React Native post a literal string works but failed on post a state variable
<p>It failed when I tried to post a variable as:</p>

<pre><code>body: JSON.stringify({
  username: this.state.username, // it doesn't work, 
}),
</code></pre>

<p>but everything is good if post as:</p>

<pre><code>body: JSON.stringify({
  username: 'literal string', // it works well
}),
</code></pre>

<p>I can get the correct value of this.state.username from console.log, so what is the problem on the post? Here is the completed code:</p>

<pre><code>import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity,
} from 'react-native';

const REQUEST_URL = 'http://localhost:8000/user';

export default class AddAUser extends Component {
  constructor(props) {
    super(props);

    this.state = {
      username: null,
      submit: false,
    }
  }

  async _signup() {
    try {
      await this.setState({
        username: this.state.username,
        submit: true
      });

      let response = await fetch(REQUEST_URL, {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          username: this.state.username, // it doesn't work, 
          // username: console.log(this.state.username),  // get correct value from TextInput
          // username: 'literal string', // it works well
        }),
      });

      await console.log(response);

    } catch (error) {
      console.log(error);
    }
  }

  render() {
    return (
      &lt;View style={styles.container}&gt;
        &lt;TextInput style={styles.textInputBox} placeholder='Username' value={this.state.username} onChangeText={(username) =&gt; this.setState({username: username})} /&gt;
        &lt;TouchableOpacity
          style={styles.submitButton}
          onPress={() =&gt; this._signup()}
          &gt;
          &lt;Text&gt;Sign Up&lt;/Text&gt;
        &lt;/TouchableOpacity&gt;
      &lt;/View&gt;
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  textInputBox: {
    height: 40,
    borderColor: 'lightblue',
    borderWidth: 1,
    borderRadius: 5,
    margin: 20,
    paddingLeft: 10,
  },
  submitButton: {
    marginTop: 20,
    paddingTop: 5,
    paddingBottom: 5,
    paddingLeft: 20,
    paddingRight: 20,
    backgroundColor: 'lightblue',
    borderRadius: 5,
  }
});
</code></pre>