React useEffect returns empty array after fetching data with axios

Question

I'm trying to fetch my data from an api I created, but it always returns an empty array.

Here's my code

const [orders, setOrders] = useState([]);

  const getOrders = async () => {
    try {
      const access_token = localStorage.getItem("access_token");
      let result = await axios({
        method: "GET",
        url: "http://localhost:3000/orders/open",
        headers: {
          access_token,
        },
      });
      setOrders(result.data);

      console.log(result.data);
      console.log(orders);
    } catch (err) {
      console.log(err);
    }
  };

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

This is the console result from my browser

As you can see, result.data successfuly returns 2 objects inside of it, but after I add it on order state with setOrders(result.data), order is still empty.

I've also tested the API on Postman and there's no problem at all.

I've been doing get data with axios this way and this is my first time having this problem.

Ryan Le · Accepted Answer · 2021-08-29 12:52:05Z

2

It's because Reactjs's Batching State Update mechanism

Your state update is asynchronously so it won't be updated until the function/event is finished.

Check for console.log(orders) right before your return() function.

answered Aug 29, 2021 at 12:52

Ryan Le

8,5101 gold badge18 silver badges27 bronze badges

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

1 Comment

William Mandang Over a year ago

ahh I see.. thanks for the article. I didn't know that before

Jemika Negara · Accepted Answer · 2021-08-29 12:53:13Z

look like you do console.log before state update, try adding setTimeout or console.log outside function like this

const [orders, setOrders] = useState([]);
  // you can console.log here after state update
  console.log(orders)

  const getOrders = async () => {
    try {
      const access_token = localStorage.getItem("access_token");
      let result = await axios({
        method: "GET",
        url: "http://localhost:3000/orders/open",
        headers: {
          access_token,
        },
      });
      setOrders(result.data);

  console.log(result.data);
  
  setTimeout(() => {
    // or wait for 100ms until orders state updated
    console.log(orders);
  }, 100);
} catch (err) {
  console.log(err);
}
  };

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

Collectives™ on Stack Overflow

React useEffect returns empty array after fetching data with axios

2 Answers 2

It's because Reactjs's Batching State Update mechanism

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

It's because Reactjs's Batching State Update mechanism

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related