title: "Cannot read property of undefined" in React after fetching and waiting
body: <p>I'm new in React, and I have a problem with fetching:</p>
  <p>I have been doing a project in react where I have to fetch from five different URLs depending on which company the user selects.
  I've changed the code many times, but it won't work.</p>
  <p>I tried with componentDidMount (but it is only called once, and I want to fetch many URLs), with <code>while(!this.state)</code> to busy wait the fetch to get the data before assign it, etc.</p>
  <p>Fetch function:</p>
  <pre><code>async fetch_data() {
      var sel = this.props.select;
      symbol = companies[sel];
      url = 'https://www.alphavantage.co/query?function=' + func + '&amp;symbol=' + symbol + '&amp;outputsize=' + osize + '&amp;apikey=' + api_key;
      var response = await fetch(url);
      var data = await response.json();
      
      while(!data);
  
      this.setState({data: data, loading: false });
      this.setValues();    
    }
  </code></pre>
  <p>Set values function (trimmed so it's not so long):</p>
  <pre><code>setValues() {
      day = this.state.data[&quot;Meta Data&quot;][&quot;3. Last Refreshed&quot;];
      open = this.state.data[&quot;Time Series (Daily)&quot;][day][&quot;1. open&quot;];
      higher = this.state.data[&quot;Time Series (Daily)&quot;][day][&quot;2. high&quot;];
    }
  </code></pre>
  <p>Render function (also trimmed):</p>
  <pre><code>render() {
      
      this.fetch_data();
      if(this.state.loading || !this.state || !this.state.data) {
        return &lt;div&gt;Loading :D...&lt;/div&gt;
      } else {
        return (
          &lt;div&gt;
            &lt;h2&gt;Symbol: {symbol}&lt;/h2&gt;
            &lt;p&gt;Url: {url}&lt;/p&gt;
            &lt;ul&gt;
              &lt;li&gt;
                Open price: {open}
              &lt;/li&gt;
              &lt;li&gt;
                Higher price: {higher}
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        );
      }
    }
  </code></pre>
  <p>I actually have done the part when the user selects a company, and the symbol (and the URL) changes...
  But the problem is that when the program wants to access <code>this.state.data[&quot;Time Series (Daily)&quot;][day][&quot;1. open&quot;];</code>, for example, it crashes because it is fetching and receiving data.</p>
  <p>The error says:</p>
  <pre><code>Unhandled Rejection (TypeError): Cannot read property '3. Last Refreshed' of undefined:
  
    42 | setValues() {
  &gt; 43 |   day = this.state.data[&quot;Meta Data&quot;][&quot;3. Last Refreshed&quot;];
       | ^  44 |   open = this.state.data[&quot;Time Series (Daily)&quot;][day][&quot;1. open&quot;];
    45 |   higher = this.state.data[&quot;Time Series (Daily)&quot;][day][&quot;2. high&quot;];
  
  </code></pre>
  <p>The app doesn't always crashes, and it shows the results, but the render component keeps calling this.fetch_data() and it crashes because sometimes (like 80% of the times) the data hasn't arrived and I'm trying to access it.</p>