Variable doesn't initialize after async function

Question

I am making a request like this:

    const createProgramari = async () => {
        let prog = [];
        try {
            await axios.get('http://localhost:8000/api/programariByDentistID', {
                params: {
                    id: JSON.parse(localStorage.getItem('user'))["id"]
                }
            })
                .then(function (res) {
                    console.log(res);
                    if(res.status === 200) {
                        prog = res.data;
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            setProgramari(prog);
        } catch(e) {
            console.log(e);
        }
    }

If I try to see this in my useEffect the variable 'programari' is an empty array (the value I initialized it with)

    const [programari, setProgramari] = useState([]);

    useEffect( () => {
        // code to run on component mount
        createProgramari();
        console.log(programari);
    }, [])

I tried printing the response and axios gets it right. What am I doing wrong? Is there a place I could learn how to not do the same mistake?

I just realized that your code doesn't make a lot of sense. Either use async/await, or you use .then callback. Only one of them at a time makes sense — devnull69
– devnull69, Commented May 21, 2021 at 18:15

jaybhatt · Accepted Answer · 2021-05-21 18:10:31Z

3

The salient point here is that setProgramari is async in nature. If it is called, it doesn't necessarily imply that it will be executed right away. One way you can handle this is follows.


useEffect(() => {
  createProgramari();
}, []);

// consider useMemo or useCallback based on your use case if need be
useEffect(() => {
  // whatever logic you want to have
  console.log(programari); // will get new value always
}, [programari])

answered May 21, 2021 at 18:10

jaybhatt

5562 silver badges7 bronze badges

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

7 Comments

OldDew Over a year ago

This works. At first I get '[]' and after logging I get the values I need. Why does it work this way, though? Isn't there a way to 'collect' all the data you need when the component mounts without having a second useEffect?

jaybhatt Over a year ago

Can you tell me what you intend to do once you get the new state. That would help a lot answer it @OldDew

OldDew Over a year ago

I want to pull some appointment data from my database to fill a calendar

jaybhatt Over a year ago

I think in that case having a useEffect for the same will make more sense.

OldDew Over a year ago

programariByDentistID is appointment-data in my language, but I got the idea! Thank you!

|

Ron B. · Accepted Answer · 2021-05-21 18:20:35Z

1

The way you wrote the function is very confusing, I'd suggest refactoring this to

const createProgramari = async () => {
    try {
        const prog = (await axios.get('http://localhost:8000/api/programariByDentistID', {
            params: {
                id: JSON.parse(localStorage.getItem('user'))["id"]
            }
        })).data;
        setProgramari(prog);
    } catch (e) {
        console.log(e)
    }
}

answered May 21, 2021 at 18:20

Ron B.

1,5504 silver badges7 bronze badges

Comments

Polish · Accepted Answer · 2021-05-21 18:12:42Z

0

To view data you can do something like this:

useEffect(() => {
   createProgramari()
     .then((someReturnedDataFromAPI) => { // Promise returned
       console.log(programari)
     })
 }, []) // Initialization

answered May 21, 2021 at 18:12

Polish

4661 gold badge4 silver badges20 bronze badges

Comments

HardCoreQual · Accepted Answer · 2021-05-21 18:35:55Z

0

in useEffect programari is equal with [] because setProgramari() not update already existed state in current component version, if set new state for programari, this modification propagate rerendering component

console.log(programari) work with current component state version

if you want dump programari you can move console.log outsite useEffect in this case you get in console two dump - [] for first version and [ withData ] for version what rerender because setState()

or if you want use data from axios in useEffect you can return it how promise

answered May 21, 2021 at 18:35

HardCoreQual

4112 gold badges4 silver badges12 bronze badges

Collectives™ on Stack Overflow

Variable doesn't initialize after async function

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related