React Native: Possible unhandled promise rejection

Question

I'm getting the following error:

Possible unhandled promise rejection (id:0: Network request failed)

Here's the promise code, I don't see what's wrong here, any ideas?

  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);     }); } 

Edit:

I added a catch function and got a better error:

You passed an undefined or null state object; instead, use forceUpdate(). index.ios.js:64 undefined

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 region.latitude and region.longitude are available in Api(region.latitude, region.longitude). But data is undefined.

I'm still not sure what's going on, why there's a problem with data and why it's undefined.

// 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 <View style={styles.container}>       <MapView         annotations={[this.state.pin]}         onRegionChangeComplete={this.onRegionChangeComplete}         style={styles.map}>       </MapView>       <View style={styles.textWrapper}>         <Text style={styles.text}>{this.state.city}</Text>         <Text style={styles.text}>{this.state.temperature}</Text>         <Text style={styles.text}>{this.state.description}</Text>       </View>     </View>   },   onRegionChangeComplete: function(region) {     this.setState({       pin: {         longitude: region.longitude,         latitude: region.latitude       }     });      Api(region.latitude, region.longitude)       .then((data) => {         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', () => Weather); 

Answer 1

catch function in your api should either return some data which could be handled by Api call in React class or throw new error which should be caught using a catch function in your React class code. Latter approach should be something like:

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);  // ADD THIS THROW error   throw error; }); 

Then in your React Class:

Api(region.latitude, region.longitude)   .then((data) => {     console.log(data);     this.setState(data);   }).catch((error)=>{      console.log("Api call error");      alert(error.message);   });