While I want to Display Error message, other component pops up error in React-CodePudding

I make something like that, When I fetch data, I pull stackoverflow users, when the stackoverflow user doesn't exist, I want to display Error Page by using useState()

In my Fetching API, function I have written that

const [isError, setIsError] = useState<boolean>(false)
const [data, setData] = useState<any>([])

const fetchUser = async () => {
  await axios.get("URL")
  .then(userData => {
    if (userStats.data.items.length === 0) {
          setIsError(true)
          console.log("User Doesn't Exist")
       }
    else {setData(userStats.data.items[0])}
    //Up there I decalre my useState with that fetched API
  })
}

When I input in input field some random letter which user really doesn't exist I check my useState boolean If it is true I want to return my ErrorPage component if it's false Success Prop Componenet

if(isError){
  return <ErrorPage />
}

return <Success username={data.userName}/>

I get in console log -> "User Doesn't Exist" and also React error

Cannot read properties of undefined (reading 'userName')

I know userName doesn't exist in data but when isError is true why my if statement doesn't ignore last return?

code up there what is shown is the logic what I do

if something else missing comment me down and I will edit it

CodePudding user response：

Your component didnt know that isError changed. It is executing as if it is still false.

  useEffect(() => {
    if(isError){
       return <ErrorPage />
    }
  },[isError]);

And of course you must import useEffect from react like this.

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

CodePudding user response：

Ok I think the problem here is that you are calling an "async" function that will not provide the result "Istantly", so when your code comes to :

if(isError){
  return <ErrorPage />
}
return <Success username={data.userName}/>

Your variable isError hasn't been set yet.

So basically it's loading with isError as default value (false) (if you want just try to initalize it to true).

There are multiple ways to fix that. For example you can load a

<Loading>

Component while the async function is going on. So basically in your code :

const [isError, setIsError] = useState<boolean>(false)
const [isLoading, setIsLoading] = useState(true)
const [data, setData] = useState<any>([])

const fetchUser = async () => {
  await axios.get("URL")
  .then(userData => {
    if (userStats.data.items.length === 0) {
          setIsError(true)
          setIsLoading(false)
          console.log("User Doesn't Exist")
       }
    else 
    {
          setData(userStats.data.items[0])
          setIsLoading(false)
     }
    //Up there I decalre my useState with that fetched API
  })
}

and

if(isLoading)
{
   return <Loading/>
}
if(isError){
  return <ErrorPage />
}

return <Success username={data.userName}/>

Or maybe you can use : useEffect like suggested in other answers. But I'm not sure that useEffect will be executed after the async operation. You should try.