title: Using state variable values after promise resolution in react
body: <p>I have used the following pattern in previous ReactJS projects - A LOT!</p>
  <pre><code>componentDidMount() {
      var promises = [];
      var promise1 = this.AsyncFunc1().then(res =&gt; {
          this.setState({some_state1: res.data.results});
      }).catch(error =&gt; {
          //deal with error
      });
      var promise2 = this.AsyncFunc2().then(res =&gt; {
          this.setState({some_state2: res.data.results});
      }).catch(error =&gt; {
          //deal with error
      });
      promises.push(promise1);
      promises.push(promise2);
      Promise.all(promises).then(() =&gt; {
          // Use the state variables
      }).catch(error =&gt; {
          // deal with error
      });
  }
  </code></pre>
  <p>I understand that state is set asynchronously and not available right away - I avoided accessing the state immediately following the setting of that state in the then statements of the async functions - but I have consistently accessed the state variable values in the promise resolution section in previous projects - but in this new project I'm working on it is failing off and on because the state variable values aren't consistently available. I've resorted to setting temp variables to the res.data.results values and using those in the Promise.all section.
  My previous projects have been in production for 2+ years without issues (that I'm aware of) - do I need to go back and rework that code? Did I make a bad assumption that the state variable values would be available in the Promise.all section?
  I appreciate the help!</p>