Réagir natif: Rejet possible d'une promesse non gérée

Question

J'obtiens l'erreur suivante: Possible unhandled promise rejection (id:0: Network request failed

Voici la promesse de code, je ne vois pas quel est le problème ici, des idées?

  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: j'ai ajouté une fonction capture et a obtenu une meilleure erreur You passed an undefined or null state object; instead, use forceUpdate(). index.ios.js:64 undefined

Voici l'index.ios.js code. L'url est fine et de me donner l'corriger les données json. Je peux voir avec le journal de la console que les deux region.latitude et region.longitude sont disponibles en Api(region.latitude, region.longitude). Mais data n'est pas défini. Je ne suis toujours pas sûr de ce qu'il se passe, pourquoi il y a un problème avec data et pourquoi il est pas défini.

// 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

La fonction catch de votre API devrait renvoyer des données qui pourraient être gérées par un appel Api dans la classe React ou générer une nouvelle erreur qui devrait être interceptée en utilisant la fonction catch dans le code de la classe React. La dernière approche devrait être comme:

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

Puis dans votre classe de réaction:

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

Answer 2

Vous devez ajouter le catch () à la fin de l'appel Api. Lorsque votre code frappe la variable catch (), il ne renvoie rien. Par conséquent, les données ne sont pas définies lorsque vous essayez d'utiliser setState (). Le message d'erreur vous le dit aussi :)

Answer 3

En fonction de ce poste, vous devez l'activer dans XCode.

1. Cliquez sur votre projet dans l'explorateur de Projets
2. Ouvrez l'onglet Info
3. Cliquez sur la flèche en bas à gauche vers le "App de Transport Paramètres de Sécurité"
4. Clic droit sur "App de la Sécurité des Transports Paramètres" et sélectionnez Ajouter une Ligne
5. Pour créé ensemble de lignes de la touche "Permettre à l'Arbitraire des Charges", tapez pour boolean et la valeur OUI.

Answer 4

Ajouter ici mon expérience qui, espérons-le, pourrait aider quelqu'un.

Je rencontrais le même problème sur l'émulateur Android sous Linux avec le rechargement à chaud. Le code était correct selon la réponse acceptée et l'émulateur pouvait accéder à Internet (j'avais besoin d'un nom de domaine).

Rafraîchissant manuellement l'application l'a fait fonctionner. Alors peut-être que cela a quelque chose à voir avec le rechargement à chaud.

Answer 5

supprimer le dossier de construction projectfile\android\app\build et exécuter le projet