Fetch data with React
<p>I am very new with React and I am trying to call the data from server with <code>fetch</code> api.</p>

<p>If I want to make a helper class to get the data like this one </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>import { Promise } from 'es6-promise';
import fetch from 'isomorphic-fetch';
let responseData = response =&gt; {
  return response;
};

let getData = (dataURL, headers) =&gt; {
  let result = {
    data: [],
    message: ''
  };
  if (dataURL === null || dataURL === undefined || dataURL === '') {
    result.message = 'URL is not correct';
    responseData(result);
  }
  fetch(dataURL, headers)
    .then(response =&gt;{
      if (response.ok) {
        response.json().then(data =&gt; {
          result.data = data;
          result.message = response.statusText;
          responseData(result);
        });
      }else{
        result.message = 'Network response was not ok.';
        responseData(result);
      }
    })
    .catch(err =&gt; console.log(err));
};

exports.responseData = responseData;
exports.getData = getData;</code></pre>
</div>
</div>
</p>

<p>and whenever the data is available, I will ask the React render the view, during the waiting time, it will show a loading icon.</p>

<p>I put the call inside <code>componentDidMout</code> but by the time it is executed, the result is always <code>undefined</code>.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>componentDidMount() {
    var self = this;
    let result = util.getData('http://localhost:3001/menus');
    const { dispatch } = this.props;
    // dispatch(menuActions.fetchMenusIfNeeded());
    if (result !== null &amp;&amp; result !== undefined) {
      if (this.isMounted()) {
        this.setState({
          items: result.data.results
        });
      }
    }
  }</code></pre>
</div>
</div>
</p>

<p>In Angular, whenever the data is available, it will be updated accordingly but I really don't understand how to do it in React.</p>

<p><strong>EDIT 1</strong>:
Update the helper class:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>import { Promise } from 'es6-promise';
import fetch from 'isomorphic-fetch';


let getData = (dataURL, headers) =&gt; {
  return fetch(dataURL, headers);
};

exports.getData = getData;</code></pre>
</div>
</div>
</p>

<p>It will always return a <code>Promise</code> so I can chain handler for data in other components. The only problem that I need to handle the message return by reading <code>Response</code> object in my components.</p>

<p>In React component:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>componentWillMount() {
    util.getData('http://localhost:3001/menus')
      .then(response =&gt;{
        if (response.ok) {
          response.json().then(data =&gt; {
            console.log(data);
            this.setState({
              items: data.result
            });
          });
        }
      })
      .catch(err =&gt; console.log(err));
  }</code></pre>
</div>
</div>
</p>

<p>But whenever it received the data, the <code>render()</code> function already finished, should I force it to update again?</p>