CODEWITHSUNDEEP
react-nativepromise
Agent Zebra
Agent Zebra

Reputation: 4540

React Native: Possible unhandled promise rejection

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 and got a more specific 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);

Upvotes: 128

Views: 430815

Answers (7)

Arun K
Arun K

Reputation: 921

In my case, I am running a local Django backend in IP 127.0.0.1:8000 with Expo start.

Just make sure you have the server in public domain not hosted locally on your machine.

If it is hosted locally find the local IP address like 192.168.0.105 or something and use that

Upvotes: 3

Didier Emmanuel Derozin
Didier Emmanuel Derozin

Reputation: 74

According to this post, you should enable it in Xcode.

  1. Click on your project in the Project Navigator
  2. Open the Info tab
  3. Click on the down arrow left to the "App Transport Security Settings"
  4. Right click on "App Transport Security Settings" and select Add Row
  5. For created row set the key “Allow Arbitrary Loads“, type to boolean and value to YES.

Xcode plist settings screenshot showing allow arbitrary loads set to YES

Upvotes: 3

hasseio
hasseio

Reputation: 609

You should add the catch() to the end of the API call. When your code hits the catch it doesn't return anything, so data is undefined when you try to use setState() on it. The error message actually tells you this too :).

Upvotes: 6

John Klees
John Klees

Reputation: 21

For me adding the return error in the catch works, maybe you can give that a try:

.catch(e => {
    console.error(e)
    return e;
})

Upvotes: 0

while1
while1

Reputation: 3370

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

Upvotes: 91

Mahdi Pourrostam
Mahdi Pourrostam

Reputation: 29

delete build folder projectfile\android\app\build and run project

Upvotes: -5

stilllife
stilllife

Reputation: 1806

Adding here my experience that hopefully might help somebody.

I was experiencing the same issue on Android emulator in Linux with hot reload. The code was correct as per accepted answer and the emulator could reach the internet (I needed a domain name).

Refreshing manually the app made it work. So maybe it has something to do with the hot reloading.

Upvotes: 3

Related Questions