Bdtjtk

I am brand new to React Native and have just figured out setting up a local server and db for my native app. I am using express and mongodb. I have my server and mongo running on my backend and am trying to make an axios call to get the data from my database but the array is coming back empty and the response from the data is undefined. I have tested the endpoints on postman and the endpoints are fine. Here is an example of my api axios request and the component I am trying to get the data back in.
Thank you in advanced for your help! Also if you would like to see any other code let me know and I will post it.

// api.js



import axios from "axios";



    export const getAllTweets = async () => {

      await axios

        .get("http://(my ip address):(port number)/api/tweet")

        .then(response => {

          console.log("response: ", response);

          return response.data;

        })

        .catch(error => {

          console.log("There are no tweets to get!", error);

        });

    };

//HomeScreen.js



import React from 'react';

import {

  Image,

  Platform,

  ScrollView,

  StyleSheet,

  Text,

  TouchableOpacity,

  View,

} from 'react-native';

import { WebBrowser } from 'expo';



import { getAllTweets } from '../constants/api';



import { MonoText } from '../components/StyledText';



export default class HomeScreen extends React.Component {

  static navigationOptions = {

    header: null,

  };

  static defaultProps = {

    getAllTweets

  };

  state = {

    tweets: ,

    isLoading: false

  }



  async componentDidMount() {

    this.setState({ isLoading: true });

    let data = await this.props.getAllTweets();

    console.log('data: ', data);

    try {

      this.setState({ isLoading: false, tweets: data });

    } catch (error) {

      console.log(error, "Cannot get tweets in cdm");

    }

  }



  render() {

    console.log("this.state.tweets", this.state.tweets); <--- this is empty

    return (

      <View style={styles.container}>



      </View>

    );

  }



  _maybeRenderDevelopmentModeWarning() {

    if (__DEV__) {

      const learnMoreButton = (

        <Text onPress={this._handleLearnMorePress} style={styles.helpLinkText}>

          Learn more

        </Text>

      );



      return (

        <Text style={styles.developmentModeText}>

          Development mode is enabled, your app will be slower but you can use useful development

          tools. {learnMoreButton}

        </Text>

      );

    } else {

      return (

        <Text style={styles.developmentModeText}>

          You are not in development mode, your app will run at full speed.

        </Text>

      );

    }

  }

It looks like you are mixing two different ways of calling async functions. Either you should be using async/await or a promise chain. You wouldn't do both.

If you change your getAllTweets function to something like this.

export const getAllTweets = async () => {

  // you need a try/catch as the await function can throw

  try {

    let response = await axios.get("http://(my ip address):(port number)/api/tweet");

    console.log("response: ", response);

    return response.data;

  } catch (error) {

    console.warn(error)

    return ;

  }

};

I found my answer. The request was not coming through with the standard ip address. By going into system preferences => network => TCP/IP (tab) and using the IPv4 ip address it corrected the issue. It also works by providing it the ip address of the virtual router 10.0.2.2 that the emulator runs on.