UseEffect hook does not work or how to display async data

Question

I am learning react and making a project that has a component that needs to display async information:

function ShortStatistic() {

    const [coronaData, setCoronaData] = useState([]);
    
    useEffect(() => {
        (async () => {
            const fetchedPosts = await getCoronaData();
            setCoronaData(fetchedPosts);
        })();
        console.log("UseEffectCall");
    }, []);

    async function getCoronaData() {
        const URL = "https://api.covid19api.com/summary";
        const requestOptions = {
            method: 'GET',
            redirect: 'follow'
        };
      
        const response = await fetch(URL, requestOptions);
        const data = await response.json();
        return data;
    }


    return (
        <div className="stat">
             <div className="stat_infected">
                  Infected:
                    <span className="infected_numbers">
                         {(coronaData["Global"]["TotalConfirmed"])}
                    </span>
              </div>
        </div>
    )
}

But I am getting an error: "TypeError: Cannot read property 'TotalConfirmed' of undefined", what means setCoronaData() didn't work. Also, there is no message output from the useEffect hook (console.log("UseEffectCall");) in the console. What is the problem?

useEffect is called after the initial render, so during the initial render, coronaData["Global"] is undefined. As a result, coronaData["Global"]["TotalConfirmed"] causes an error because its like doing: undefined["TotalConfirmed"]. You need to check if coronaData["Global"] is defined before accessing any property on it. Using optional chaining, you can do: coronaData?.["Global"]?.["TotalConfirmed"] — Yousaf
– Yousaf, Commented Jul 3, 2021 at 11:46
@Yousaf Thanks for the help! Then I'll probably do an initial verification of coronaData or write an initial state-template for it. — Natsuo
– Natsuo, Commented Jul 3, 2021 at 12:29

Erfan HosseinPoor · Accepted Answer · 2021-07-03 11:55:53Z

2

for first render your coronaData variable is an empty array [] and when you call

coronaData["Global"]["TotalConfirmed"]

it means undefined

You can use

coronaData?.["Global"]?.["TotalConfirmed"]

answered Jul 3, 2021 at 11:55

Erfan HosseinPoor

1,0877 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

UseEffect hook does not work or how to display async data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related