Get data from async function and update state

Question

I have created a variable using useState and that is an empty array.

const [data, setData] = useState([]);

I am calling an async function inside useEffect that is helping me to get all the data and update the data when received

useEffect(() => {
    //
    const items = [];
    async function fetchData() {
      items = await getAllItems();   //it should wait for data and then setData
      setData(items);    
    }
    fetchData();
    console.log("from useEffect", items);  // still items array is empty
  }, []);

Here is my imported data retrieving function which uses Axios and returns the data:

export const getAllItems = async () => {
  const url = baseUrl + "/items/getAllItems";
  await axios({
    method: "GET",
    withCredentials: true,
    url: url,
  }).then((res) => {
    return res;  // when console logged we get a proper array if data
  });
};

But nothing works all I am getting back is object of promise. Could anyone guide me what I am missing out in my code?

Setstate is asynchronously, you can not see updated data in console log after setstate. Use useEffect dependency for updated data — Nijat Aliyev
– Nijat Aliyev, Commented Apr 16, 2022 at 12:23
I have tried making this call outside useEffect and then updating it in useEffect but that also not works — Ashish sah
– Ashish sah, Commented Apr 16, 2022 at 12:26
Check is your api response array or object, then write some condition in html. If data have then map — Nijat Aliyev
– Nijat Aliyev, Commented Apr 16, 2022 at 13:00

Monstar · Accepted Answer · 2022-04-16 15:46:48Z

3

You are assigning the value of getAllItems() to a constant variable items that has already been declared here:

const items = [];

However, as per the mdn web docs:

The value of a constant can't be changed through reassignment (i.e. by using the assignment operator), and it can't be redeclared (i.e. through a variable declaration).

So you need to either initialize that variable using let, or better yet assign it immediately as follow:

const items = await getAllItems();

You can then get rid of const items = [];

edited Apr 16, 2022 at 15:46

answered Apr 16, 2022 at 12:52

Monstar

1,0381 gold badge9 silver badges27 bronze badges

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

6 Comments

Ashish sah Over a year ago

I messed up with my jsx syntax thats why it was creating an issue. Could you please add some explanation as it will help others .

Ashish sah Over a year ago

we can use this or declare items as let that will also help and to stop re rendering in endless loop remove the name of variable from the useEffect array or else it will keep on re rendering infinite times

Monstar Over a year ago

@Ashishsah Did my answer allow to solve your problem by itself or was there some other issue that needs to be included as well ?

Ashish sah Over a year ago

well I guess there were few mistakes by my side. Well I am editing your answer.

Monstar Over a year ago

@Ashishsah I added explanations to the point mentioned in my answer. Feel free to add more to it if needed.

|

Asplund · Accepted Answer · 2022-04-16 12:25:44Z

0

You didn't return the data from the axios call.

export const getAllItems = async () => {
  const url = baseUrl + "/items/getAllItems";
  const { data } = await axios({
    method: "GET",
    withCredentials: true,
    url: url,
  });
  return data;
};

answered Apr 16, 2022 at 12:25

Asplund

2,5261 gold badge11 silver badges20 bronze badges

2 Comments

Ashish sah Over a year ago

that is not working

Asplund Over a year ago

if you console.log items before setData is called what is shown?

LauriM · Accepted Answer · 2022-04-16 12:35:23Z

0

Your console.log() is in the wrong position (2). Should be in the position marked with (1) instead. Please check the comments I added:

useEffect(() => {
    const items = [];
    async function fetchData() {
      items = await getAllItems();   //it should wait for data and then setData
      setData(items);
      // (1) you chould console.log() the items array here instead
      // if the data is properly returned from getAllItems() it will be visible here
      console.log("from useEffect", items);
    }
    fetchData();
    console.log("from useEffect", items);  // (2) items array will be empty here right after fetchData() as getAllItems() has not returned yet.
  }, []);

answered Apr 16, 2022 at 12:35

LauriM

294 bronze badges

3 Comments

Ashish sah Over a year ago

Uncaught (in promise) TypeError: Assignment to constant variable. this is what i get

LauriM Over a year ago

Try changing const items = [] to let items = []. Like the error says you cannot reassign a const variable (although you can e.g. .push() to it, here it will be completely reassigned).

LauriM Over a year ago

Or even better: do what @monstar said and assign directly to const.

codmitu · Accepted Answer · 2022-04-16 13:14:34Z

0

useEffect(() => {
   let isMounted = true 
   function fetchData() {
      const items = axios.get(baseUrl + "/items/getAllItems")
      if (isMounted) setData(items);    
   }
   fetchData();
   return () => {isMounted = false}
}, []);

answered Apr 16, 2022 at 13:14

codmitu

7131 gold badge8 silver badges12 bronze badges

Collectives™ on Stack Overflow

Get data from async function and update state

4 Answers 4

6 Comments

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related