I am simply trying to fetch a list of customers from the database and display it on the frontend. But for some reason the function keeps returning before the fetching could be done. However, when I try to console.log out the list it shows that it has been fetched. I used async/await but it still doesn't work

enter image description here

this is my entire code. I tested it by simply displaying one email address from the list and it showed this error

enter image description here

When I remove the line to display the email and console.log the whole list before returning the function, it shows that the whole list has been fetched in the console.

enter image description here

enter image description here

CodePudding user response：

It is because AC_data is null at the first render.

So in your return of you component instead of doing :

<Text>{AC_data[0]['email_address']}</Text>

You can do :

<Text>{AC_data?.[0]?.['email_address']}</Text>

Or you can set a loading while there is no data.