CODEWITHSUNDEEP
javascriptreactjspromiseuse-effectreact-functional-component
Nittoc
Nittoc

Reputation: 43

Fetching data in React's useEffect() returns "undefined"

I'm trying to fetch data from a database. It's a get request. All works fine as long I am using the fetched data in the async function. But ouside of it, it just returns "undefined". What am I doing wrong? Thanks for your help :)

const [accountInfos, setAccountInfos] = useState();
      const [error, setError] = useState();
      const [loading, setLoading] = useState(true);

      useEffect(() => {
        (async function runEffect() {
            const fetchedAccountInfos =  await fetchAccountInfos();
            if (fetchedAccountInfos && fetchedAccountInfos.length > 0) {
                console.log(fetchedAccountInfos)  //This console.log works
                setAccountInfos(fetchedAccountInfos);
                setLoading(false);
                console.log(accountInfos)  //This console.log returns 
                                             "undefined"
              } else {
                setError("Accountdaten können nicht geladen werden!");
                setLoading(false);
                };
        })();
      }, []);
      console.log(accountInfos);  //This console.log returns "undefined"

Upvotes: 3

Views: 21480

Answers (5)

Anshuman Singh
Anshuman Singh

Reputation: 1

As most of the answers already states the issue it is caused due to, i.e. asynchronous nature of JS. The solution to tackle this issue is simply using a conditional Statement or a ternary operator.

const [accountInfos, setAccountInfos] = useState();
  const [error, setError] = useState();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    (async function runEffect() {
        const fetchedAccountInfos =  await fetchAccountInfos();
        if (fetchedAccountInfos && fetchedAccountInfos.length > 0) {
            console.log(fetchedAccountInfos)  //This console.log works
            setAccountInfos(fetchedAccountInfos);
            setLoading(false);
            if(accountInfos){
                //console the output only if available
                 console.log(accountInfos);
            }
          } else {
            setError("Accountdaten können nicht geladen werden!");
            setLoading(false);
            };
    })();
  }, []);
  console.log(accountInfos);  //This console.log returns "undefined"

Same approach is useful if rendering the component and fetching some data in useEffect hook.

{
   dataIsReturned ? <RenderYourData/> : <h1> Loading </h1>
}

Upvotes: 0

Zohaib Ijaz
Zohaib Ijaz

Reputation: 22885

In order to get the updated value and then do some action based on that value, you need to use a useEffect hook

e.g.

const [toggle, setToggle] = useState(false);

useEffect(() => {
   // do something based on new value of toggle
}, [toggle]);

const trigger = () => {
  setToggle(true);
  // OR
  //setToggle(t => !t);
}

Upvotes: -1

DanCouper
DanCouper

Reputation: 850

It's not React-specific: that's an async function, so the promise is going to resolve after the console log occurs, that's why you get undefined. This is just normal JS behaviour -- the value is undefined at the point console.log executes.

In the return value where you define the JSX, render null (or some empty state component) if accountinfos is null, otherwise render the actual component based on the return value from the API. Once you get a response, the state will update and the component will rerender

Upvotes: 3

Astrit Spanca
Astrit Spanca

Reputation: 724

Try this just to see the result?

      const [accountInfos, setAccountInfos] = useState();
      const [error, setError] = useState();
      const [loading, setLoading] = useState(true);

      useEffect(() => {
        (async function runEffect() {
            const fetchedAccountInfos =  await fetchAccountInfos();
            if (fetchedAccountInfos && fetchedAccountInfos.length > 0) {
                setAccountInfos(fetchedAccountInfos);
                setLoading(false);
                console.log(accountInfos)  //This console.log works
              } else {
                setError("Accountdaten können nicht geladen werden!");
                setLoading(false);
                };
        })();
      }, []);
      console.log(accountInfos);  //This console.log returns "undefined"

      useEffect(() => {
        console.log(accountInfos); //check the result here
      }, [accountInfos])

Upvotes: 0

Daniel Herrero Hernando
Daniel Herrero Hernando

Reputation: 312

You are not doing anything wrong, the console.log outside the useEffect just executes once, on the initial component function call, so at that time the accountInfos variable is still undefined.

However, the console.log inside the useEffect is executed after fetching the data so it is defined at that time.

Upvotes: 0

Related Questions