Native reagieren: Mögliche Ablehnung von unbehandelten Versprechungen

Ich erhalte die folgende Fehlermeldung: Possible unhandled promise rejection (id:0: Network request failed

Hier ist der Versprechen-Code, ich sehe nicht, was hier falsch ist, irgendwelche Ideen?

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

** Bearbeiten: Ich habe eine Fangfunktion hinzugefügt und einen besseren Fehler erhalten You passed an undefined or null state object; instead, use forceUpdate(). index.ios.js:64 undefined

Hier ist der index.ios.js Code. Die URL ist in Ordnung und gibt mir die richtigen JSON-Daten. Ich kann mit dem Konsolenprotokoll sehen, dass beide region.latitudeund region.longitudein verfügbar sind Api(region.latitude, region.longitude). Ist dataaber undefiniert. Ich bin mir immer noch nicht sicher, was los ist, warum es ein Problem gibt dataund warum es undefiniert ist.

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

Die catch-Funktion in Ihrer API sollte entweder einige Daten zurückgeben, die vom Api-Aufruf in der React-Klasse verarbeitet werden könnten, oder einen neuen Fehler auslösen, der mithilfe einer catch-Funktion in Ihrem React-Klassencode abgefangen werden sollte. Letzterer Ansatz sollte ungefähr so ​​aussehen:

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

Dann in Ihrer Reaktionsklasse:

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

Sie sollten den catch () am Ende des Api-Aufrufs hinzufügen. Wenn Ihr Code auf catch () trifft, gibt er nichts zurück, sodass die Daten nicht definiert sind, wenn Sie versuchen, setState () darauf zu verwenden. Die Fehlermeldung sagt dir das auch :)

Laut diesem Beitrag sollten Sie es in XCode aktivieren.

1. Klicken Sie im Projektnavigator auf Ihr Projekt
2. Öffnen Sie die Registerkarte Info
3. Klicken Sie auf den Abwärtspfeil links neben "App Transport Security Settings".
4. Klicken Sie mit der rechten Maustaste auf "Sicherheitseinstellungen für den App-Transport" und wählen Sie Zeile hinzufügen
5. Setzen Sie für die erstellte Zeile den Schlüssel „Allow Arbitrary Loads“, lassen Sie boolean und den Wert YES ein.

Fügen Sie hier meine Erfahrung hinzu, die hoffentlich jemandem helfen könnte.

Ich hatte das gleiche Problem mit dem Android-Emulator unter Linux beim Hot-Reload. Der Code war gemäß der akzeptierten Antwort korrekt und der Emulator konnte das Internet erreichen (ich brauchte einen Domainnamen).

Durch manuelles Aktualisieren der App funktionierte sie. Vielleicht hat es etwas mit dem heißen Nachladen zu tun.

Build-Ordner löschen projectfile\android\app\buildund Projekt ausführen

In meinem Fall verwende ich ein lokales Django-Backend in IP 127.0.0.1:8000 mit Expo-Start. public domainStellen Sie einfach sicher, dass der Server nicht lokal auf Ihrem Computer gehostet ist