React Native fetch() not working

I am trying to create a React Native app which fetches data from Google APIs but I am experiencing some issues (Unhandled JS Exception: undefined is not an object (evaluating ‘responseData[0].destination_addresses’) ).

Here is the code:

  • Fetch Api unable to get Session from PHP server
  • Fetch API - What's the use of redirect: manual
  • How to get JSON data from fetch (react-native)
  • fetch resource, compute hash, return promise
  • What is the Fetch API equivalent of XMLHttpRequest.send(file)?
  • Using an authorization header with Fetch in React Native
  • '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);
    

    And this the the json response I am parsing:

    {
       "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"
    }
    

  • Flask server cannot read file uploaded by POST request
  • successful fetch of api but no response
  • How to get headers of the response from fetch
  • Can Service Workers respond to synchronous XHR requests?
  • What limitations apply to opaque responses?
  • How can I fetch an array of URLs with Promise.all?
  • One Solution collect form web for “React Native fetch() not working”

    I believe you need to check for status code.

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