React's SetState is not updating

Question

I am trying to make a currency converter using react.

I make the request to the API and I got what I need. But when I try to set the state, it gives undefined. I tried some other people's code but it's still not working.

Here's the code

import React from 'react';

const API_URL = {MY API URL};

function App() {
  ///////////IMPORTANT////////////
  const [currency, setCurrency] = useState(); 

  //The function to actually make the fetch or request
  function makeApiRequest() {
    fetch(API_URL)
      .then(res => res.json())
      .then(data => {
        setCurrency(data); //Sets currency to data
      });
  }

  //Makes a request to the API
  useEffect(() => {
    makeApiRequest();
    console.log(currency); //Outputs 'undefined'
  }, [])

  ///////////IMPORTANT////////////

  return (
    <h1>Currency Converter</h1>
  );
}

and there are no errors, and here is what data returns

{rates: {…}, base: "EUR", date: "2020-04-09"}
base: "EUR"
date: "2020-04-09"
rates:
AUD: 1.7444
BGN: 1.9558
BRL: 5.5956
CAD: 1.5265
CHF: 1.0558
CNY: 7.6709
CZK: 26.909
DKK: 7.4657
GBP: 0.87565
HKD: 8.4259
HRK: 7.6175
HUF: 354.76
IDR: 17243.21
ILS: 3.8919
INR: 82.9275
ISK: 155.9
JPY: 118.33
KRW: 1322.49
MXN: 26.0321
MYR: 4.7136
NOK: 11.2143
NZD: 1.8128
PHP: 54.939
PLN: 4.5586
RON: 4.833
RUB: 80.69
SEK: 10.9455
SGD: 1.5479
THB: 35.665
TRY: 7.3233
USD: 1.0867
ZAR: 19.6383

Does this answer your question? https://stackoverflow.com/questions/53332321/react-hook-warnings-for-async-function-in-useeffect-useeffect-function-must-ret — keikai, Apr 14 '20 at 03:54
No. I'm not actually sure why this cause this.. It's still the same, undefined. — Philiero, Apr 14 '20 at 04:00

Ajin Kabeer · Accepted Answer · 2020-04-14T04:32:58.040

It takes some time to fetch the data since the function is asynchronous and useEffect runs after the initial paint has been committed to the screen, that is why on the initial render currency is undefined. Try this approach.

import React, { useEffect, useState } from "react";

const API_URL = {MY_API_URL};

function App() {
  ///////////IMPORTANT////////////
  const [currency, setCurrency] = useState();

  //The function to actually make the fetch or request
  async function makeApiRequest() {
    const response = await (await fetch(API_URL)).json();
    setCurrency(response);
  }

  //Makes a request to the API
  useEffect(() => {
    makeApiRequest();
  }, []);

   if (currency) {
      console.log(currency);
    }

  return <h1>Currency Converter</h1>;
}

export default App;

Thank you so much.Now I kind of understand what is going on. Thanks! — Philiero, Apr 14 '20 at 04:28

score 0 · Answer 2 · answered Apr 14 '20 at 04:24

setState runs asynchronously so, you're logging out the data before setState finish setting the state. So, try the following modifications -

import React from 'react';

const API_URL = {MY API URL};

function App() {
 ///////////IMPORTANT////////////
 const [currency, setCurrency] = useState(); 

 //The function to actually make the fetch or request
 function makeApiRequest() {
   fetch(API_URL)
     .then(res => res.json())
     .then(data => {
       setCurrency(data); //Sets currency to data
     });
 }
makeApiRequest();
 //Makes a request to the API
 useEffect(() => {
   console.log(currency); //Outputs 'undefined'
 }, [currency]) //so that this useEffect hooks only runs when the currency changes

 ///////////IMPORTANT////////////

 return (
   <h1>Currency Converter</h1>
 );
}```



You can change back to you're code once you know that setState is working.

React's SetState is not updating

2 Answers2