React js cannot return data from function

Question

I have two functions, one is a page that calls for data from a function that gets data to and from a server.

The function that gets data to and from a server:

import React, { useEffect, useState, createRef, lazy, useContext } from "react";
import { UserContext } from "./UserContext";

import jwt_decode from "jwt-decode";

import axios from "axios";

export async function getProtectedAsset(url, user, setUser) {
  try {
    const res = await axios
      .post(url, token)
      .then((res) => {
        console.log(res.data);
        return res.data;
      })
      .catch((err) => {
        console.error(err);
      });
  } catch (error) {
    console.log(error);
    throw err;
  }
}

The code that calls this function:

useEffect(async () => {
    try {
      let res = await getProtectedAsset(
        "http://127.0.0.1:5002/mypage",
        user,
        setUser
      );

      console.log(res);
      
    } catch (error) {
      console.error(error.message);
    }
  }, []);

getProtectedAsset will do a successful console.log(res.data); with the data from the server. The calling function that uses useEffect when doing console.log(res); will write undefined to the console.

Why can't I simply return from the function? Obviously the data is received from the server, but for some reason a function cannot return it? I am very confused

Thank you for your help!

you're not returning res from your getProtectedAsset function — nsevens
– nsevens, Commented Apr 7, 2022 at 13:42
Yes you have to had a return at the end of your function getProtectedAsset -> return res — Fred
– Fred, Commented Apr 7, 2022 at 13:46
You are mixing async and .then. If you are awaiting async function, skip the then and catch and just return res in the same scope as you declare it. You are already catching using a try/catch block — Abraham Labkovsky
– Abraham Labkovsky, Commented Apr 7, 2022 at 13:48

Liki Crus · Accepted Answer · 2022-04-07 14:06:20Z

1

You should not use async in useEffect. This is not supported.

I am not sure why you can't use getProtectedAsse(...).then(res=> {}).

But if you want to run getProtectedAsse() synchronously, try like the following instead.

useEffect(() => {
    const asyncInternalFunc = async () => {
      try {
        let res = await getProtectedAsset(
          "http://127.0.0.1:5002/mypage",
          user,
          setUser
        );
        console.log(res);
        return res;
      } catch (error) {
        console.error(error.message);
      }
    }
    asyncInternalFunc().then();
  }, []);

Updated async function to return the response.

export async function getProtectedAsset(url, user, setUser) {
  try {
    const res = await axios.post(url, token);
    return res;
  } catch (error) {
    console.log(error);
    throw err;
  }
}

edited Apr 7, 2022 at 14:06

answered Apr 7, 2022 at 13:53

Liki Crus

2,0825 gold badges20 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

J. Doe Over a year ago

This console.log(res); still returns undefined :/

Liki Crus Over a year ago

Please check my updated post out.

Pellay Over a year ago

I wouldn't even define a constant for rez . just return await axios.post(url, token); - But by this point the entire function is becoming redundant and the user, setUser params don't even get used.

J. Doe Over a year ago

That updated post solved my issue! Thank you! I am very grateful for you and all other people here on stack overflow that is so helpful and nice! :)

Pellay Over a year ago

I'd recommend you do read through the article I linked in the comments above, it explains why and how this works.

|

Collectives™ on Stack Overflow

React js cannot return data from function

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related