0

I am trying to test my react project locally with my computer and with my phone. I am using JavaScript not TypeScript. When I run the project on my computer everything works fine, but when I try to load it on my phone, I get an error: Unhandled Rejection (TypeError): undefined is not an object (evaluating 'scheduleArr.forEach'). I thought I was using async and await correctly because this code workes on my computer. I'm confused as to why this code works on one platform but not the other.

async function getSchedule() {
  let scheduleArr = await axios.get('api/schedule/')
    .then(response => { 
      return response.data; 
     })
    .catch((error) => {
       console.log(`ERROR: ${error}`);
    });

  scheduleArr.forEach(game => {
    /* do stuff */
  }

});

I think this problem is directly related to async and await because when I comment out this function, my project loads correctly on my phone.

Can anyone help me understand what I'm doing wrong?

Chase
  • 33
  • 1
  • 7
  • 3
    when using `async` and `await` you need `try` and `catch` blocks and not `then` and `catch` methods – Sysix Feb 06 '21 at 22:06
  • Is your phone on the same network as your computer? Or are you using your mobile data network? – codemonkey Feb 06 '21 at 22:15
  • @codemonkey my phone is on the same network. When I tested the style of my app without any logic, it rendered correctly. – Chase Feb 06 '21 at 22:22
  • @Sysix Can you explain this a little bit more? When I change my `.then` `.catch` to `try` `catch` I get an error on both devices. – Chase Feb 06 '21 at 22:24
  • 1
    The point is that your `axios` request obviously bombs on your phone and the `try` `catch` thing will help identify the specific error. – codemonkey Feb 06 '21 at 22:29
  • @codemonkey I am running my react client on `localhost:3000`and I am running my backend on `localhost:5000`. Could the issue be that on mobile, my client isn't able to access the backend? – Chase Feb 06 '21 at 22:37

2 Answers2

1

You can't use the async/await pattern with then. Either use it like :

async function getSchedule() {
    try {
      let scheduleArr = await axios.get("api/schedule/");
      console.log(scheduleArr.data);
    } catch (err) {
      console.log(`ERROR: ${err}`);
    }

    scheduleArr.forEach(game => {
      /* do stuff */
    });
  }

Or with the default pattern :

function getSchedule() {
    axios
      .get("api/schedule/")
      .then(response => {
        let scheduleArr = response.data;

        // Do this inside the 'then'
        scheduleArr.forEach(game => {
          /* do stuff */
        });
      })
      .catch(error => {
        console.log(`ERROR: ${error}`);
      });
  }

Note that I moved your foreach loop into the then. It is asynchronous and therefore need to be triggered only when you get the result of your api call.

Quentin Grisel
  • 3,383
  • 1
  • 6
  • 12
  • This didn't solve my problem, but I think this is better coding practice – Chase Feb 06 '21 at 22:36
  • 1
    @Chase This answer is not meant to actually solve your problem. It will simply help troubleshoot the origins of it. – codemonkey Feb 06 '21 at 22:43
  • 1
    @Chase **undefined is not an object (evaluating 'scheduleArr.forEach')** You get this error because you are trying to loop over `schedulArr` when it is not initialized. As I said, you need to put it inside your `then`. Now, if it still does not works, share more of your code so we can check it out please. – Quentin Grisel Feb 06 '21 at 22:43
0

I figured out what the issue was. It had nothing to do with async await or axios.

This was my code before

function getSchedule() {
    axios
      .get("http://localhost:5000/api/schedule/")
      .then(response => {
        let scheduleArr = response.data;

        // Do this inside the 'then'
        scheduleArr.forEach(game => {
          /* do stuff */
        });
      })
      .catch(error => {
        console.log(`ERROR: ${error}`);
      });
  }

I changed my API call to use my actual local IP instead of localhost

function getSchedule() {
    axios
      .get("http://192.168.X.XX:5000/api/schedule/")
      .then(response => {
        let scheduleArr = response.data;

        // Do this inside the 'then'
        scheduleArr.forEach(game => {
          /* do stuff */
        });
      })
      .catch(error => {
        console.log(`ERROR: ${error}`);
      });
  }

Nesting my code in the .then block did fix my undefined error even with the bad url. Thank you for that suggestion @Quentin Grisel.

Fixing my url let me test it on different devices.

Chase
  • 33
  • 1
  • 7