Fetching data but "Cannot read property '0' of undefined"

Question

I try to fetch some data from the https://randomuser.me/api/ . I wanna take an random user gender but i don't know why my function doesn't do it and i get this error "Cannot read property '0' of undefined"

My code:

const [fetchData, setFetchData] = useState('');
         
    fetch('https://randomuser.me/api/')
        .then((response) => response.json())
        .then(setFetchData)
        .then(console.log(fetchData.results[0].gender));

you are trying to access state immediately after it is set . https://stackoverflow.com/questions/38558200/react-setstate-not-updating-immediately — Shyam, May 31 '21 at 16:39
@selbie i think yes, because i did the same thing on my last project and it went well — Sebastian Marius, May 31 '21 at 17:11

selbie · Accepted Answer · 2021-05-31T16:56:37.687

fetchData doesn't get updated when setFetchData is called. Remember, it's just a local variable that got assigned when you invoked useState. It doesn't magically get updated until the next call to your function. And even then, setState is asynchronous, so it might not change immediately.

This is what you likely really want.

fetch('https://randomuser.me/api/')
    .then((response) => response.json())
    .then((json)=> {
         setFetchData(json);
         console.log(json.results[0].gender);
     });

I tried it out locally and it worked for me.

Also, as an aside. For robustness, so you don't throw an exception on a console statement when the response is completely unexpected:

if (json && json.results && json.results[0]) {
    console.log(json.results[0].gender);
}

Fetching data but "Cannot read property '0' of undefined"

1 Answers1