title: React Native: Possible unhandled promise rejection
body: <p>I'm getting the following error:</p>
  <blockquote>
  <p><code>Possible unhandled promise rejection (id:0: Network request failed)</code></p>
  </blockquote>
  <p>Here's the promise code, I don't see what's wrong here, any ideas?</p>
  
  <pre class="lang-js prettyprint-override"><code>  return fetch(url)
      .then(function(response){
        return response.json();
      })
      .then(function(json){
        return {
          city: json.name,
          temperature: kelvinToF(json.main.temp),
          description: _.capitalize(json.weather[0].description)
        }
      })
      .catch(function(error) {
      console.log('There has been a problem with your fetch operation: ' + error.message);
      });
  }
  </code></pre>
  <p><strong>Edit</strong>:</p>
  <p>I added a catch function and got a better error:</p>
  <blockquote>
  <p><code>You passed an undefined or null state object; instead, use forceUpdate(). index.ios.js:64 undefined</code></p>
  </blockquote>
  <p>Here's the index.ios.js code. The url is fine and giving me the correct json data. I can see with console log that both <code>region.latitude</code> and <code>region.longitude</code> are available in <code>Api(region.latitude, region.longitude)</code>. But <code>data</code> is undefined.</p>
  <p>I'm still not sure what's going on, why there's a problem with <code>data</code> and why it's undefined.</p>
  <pre class="lang-js prettyprint-override"><code>// var React = require('react-native'); --deprecated
  
  // updated
  import React from 'react';
  
  // updated
  import {
    AppRegistry,
    MapView,
    View,
    Text,
    StyleSheet,
  } from 'react-native';
  
  /*
  var {
    AppRegistry,
    MapView,
    View,
    Text,
    StyleSheet
  } = React;
  */ // -- depreciated 
  
  
  var Api = require('./src/api');
  
  var Weather = React.createClass({
    getInitialState: function() {
      return {
        pin: {
          latitude: 0,
          longitude: 0
        },
        city: '',
        temperature: '',
        description: ''
      };
    },
    render: function() {
      return &lt;View style={styles.container}&gt;
        &lt;MapView
          annotations={[this.state.pin]}
          onRegionChangeComplete={this.onRegionChangeComplete}
          style={styles.map}&gt;
        &lt;/MapView&gt;
        &lt;View style={styles.textWrapper}&gt;
          &lt;Text style={styles.text}&gt;{this.state.city}&lt;/Text&gt;
          &lt;Text style={styles.text}&gt;{this.state.temperature}&lt;/Text&gt;
          &lt;Text style={styles.text}&gt;{this.state.description}&lt;/Text&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    },
    onRegionChangeComplete: function(region) {
      this.setState({
        pin: {
          longitude: region.longitude,
          latitude: region.latitude
        }
      });
  
      Api(region.latitude, region.longitude)
        .then((data) =&gt; {
          console.log(data);
          this.setState(data);
        });
    }
  });
  
  
          
  
  var styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'stretch',
      backgroundColor: '#F5FCFF'
    },
    map: {
      flex: 2,
      marginTop: 30
    },
    textWrapper: {
      flex: 1,
      alignItems: 'center'
    },
    text: {
      fontSize: 30
    }
  });
  
  AppRegistry.registerComponent('weather', () =&gt; Weather);
  </code></pre>