Réagir natif fetch() ne fonctionne pas

Question

Je suis en train de créer une application React Native qui récupère des données de Google API, mais je rencontre quelques problèmes (Exception JS non gérée: undefined n'est pas un objet (évaluation 'responseData [0] .destination_addresses ')).

Voici le code:

'use strict'; 

var React = require('react-native'); 
var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    TouchableHighlight, 
} = React; 

var INITIAL_DATA = [ 
    {city: 'CityName', duration: "0 hours"}, 
]; 

var REQUEST_URL = 'https://maps.googleapis.com/maps/api/distancematrix/json?mode=driving&language=en&origins=Austin&destinations=San+Francisco&key=PRIVACY'; 

var AwesomeProject = React.createClass({ 
    getInitialState: function() { 
    return { 
     data: INITIAL_DATA[0], 
    }; 
    }, 

    componentDidMount: function() { 
    this.fetchData(); 
    }, 

    fetchData: function() { 
    fetch(REQUEST_URL) 
     .then((response) => response.json()) 
     .then((responseData) => { 

     this.setState({ 
      data: { city: responseData[0].destination_addresses[0].rendered, duration: responseData[0].rows[0].elements[0].duration.text.rendered }, 
     }); 
     }) 
     .done(); 
    }, 
    render: function() { 
    return (
     <View style={styles.container}> 
     <View style={styles.textContainer}> 
      <Text style={styles.city}> 
      {this.state.data.city} 
      </Text> 
      <Text style={styles.text}> 
      {this.state.data.duration} 
      </Text> 
     </View> 

     </View> 
    ); 
    } 
}); 

var Dimensions = require('Dimensions'); 
var windowSize = Dimensions.get('window'); 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#FFFFFF', 
    }, 
    textContainer: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    }, 
    city: { 
    fontSize: 30, 
    textAlign: 'center', 
    margin: 10, 
    }, 
    text: { 
    fontSize: 18, 
    paddingLeft: 20, 
    paddingRight: 20, 
    textAlign: 'center', 
    color: '#333333', 
    marginBottom: 5, 
    }, 
    buttonContainer: { 
    bottom: 0, 
    flex: .1, 
    width: windowSize.width, 
    backgroundColor: '#eee', 
    }, 
    button: { 
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center', 
    }, 
    buttonText: { 
    fontSize: 30, 
    color: '#666666', 
    }, 
}); 


AppRegistry.registerComponent('AwesomeProject',() => AwesomeProject); 

Et ce sont la réponse JSON J'analyse:

{ 
    "destination_addresses" : [ "San Francisco, CA, USA" ], 
    "origin_addresses" : [ "Austin, TX, USA" ], 
    "rows" : [ 
     { 
     "elements" : [ 
      { 
       "distance" : { 
        "text" : "2,830 km", 
        "value" : 2830409 
       }, 
       "duration" : { 
        "text" : "1 day 1 hour", 
        "value" : 90952 
       }, 
       "status" : "OK" 
      } 
     ] 
     } 
    ], 
    "status" : "OK" 
} 

Answer 1

Je crois que vous devez vérifier le code d'état.

fetch(REQUEST_URL) 
    .then((response) => response.json()) 
    .then((responseData) => { 
    if(responseData.status === "OK"){ 
    this.setState({ 
     data: { city: responseData[0].destination_addresses[0].rendered,duration: responseData[0].rows[0].elements[0].duration.text.rendered }, 
    }); 
    }else{ 
    // Do something 
    } 
    }) 
    .done();