title: JavaScript React async/await returning the wrong body?
body: <p>I'm new to React, and trying it out for a UI project, with a <em>Java REST</em> backend.</p>
  
  <p>I'm seeing really crazy stuff happening in the dev tools window.</p>
  
  <p>Every few refreshes, <code>loadedFilesList</code> gets the data from the /splitFiles call.</p>
  
  <p>I've confirmed that the <em>REST</em> service works correctly.
  If I debug and pause on the highlighted line below, <code>body2</code> contains the data that can only be from <code>response1</code>.</p>
  
  <p>What asynchronous nonsense is going on?</p>
  
  <pre><code>  state = {
      splitFilesList: [],
      loadedFilesList: []
    }
  
  
    logFields = () =&gt; {
        console.log('Vars', `${this.state.loadedFilesList}`)
    }
  
    async asyncGetSplitFiles()
    {
      let response1 = await fetch('/splitFiles');
  
      let body1 = await response1.json();
      this.setState({ splitFilesList: body1.files }, () =&gt; {this.logFields()});
    }
  
    async asyncGetLoadedFiles()
    {
      let response2 = await fetch('/loadedFiles');
  
      let body2 = await response2.json();    &lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;
      this.setState({ loadedFilesList: body2.files }, () =&gt; {this.logFields()});
    }
  
    async componentDidMount() {
        this.asyncGetSplitFiles();
        this.asyncGetLoadedFiles();
    }
  </code></pre>