React Native App only setting to state on second load

Question

I am currently working on the capstone for my course, but I have to use multiple async functions. I need to use AsyncStorage, SQLite storage, and fetching from a REST API. The issue I am encountering is when I have to fetch from the REST API and put it to state. I am not sure why, but it is only working the second time I load my app. I could be an issue with Expo, but I doubt it. I just need some help. Here is all the relevant code:

const [menuItems, setMenuItems] = useState();

const fetchMenuItemsFromAPI = async () => {
        try {
            const response = await fetch('https://raw.githubusercontent.com/Meta-Mobile-Developer-PC/Working-With-Data-API/main/capstone.json');
            const json = await response.json();
            setMenuItems(Object.values(json.menu));
        } catch (e) {
            console.error('Error:', e);
        }
}

useEffect(() => {
        
        fetchMenuItemsFromAPI();
        
},[])

I have no idea why it only loads the second time I load the app. If anyone has any feedback or can redirect me to a resource that will teach me asynchronous functions better than the course did, I would be infinitely thankful. Even the documentation for React Native says this is how you do it, so I am incredibly confused.

I have previously tried defining the function inside of the useEffect hook, but that did not work. I think it is also worth noting that when I use things like: console.log(Object.values(json.menu)), it prints exactly what I need it to print, but when I try setting that exact value into my setMenuItems(), it just does not work the way I need it to.

Franco Mendo · Accepted Answer · 2023-11-06 22:21:01Z

1

From what I see in the code it should work, maybe the problem is not the status update but a problem rendering the new "menuItems" values. You could check if it is updating well the state when doing it for the first time with the following code, possibly it is updating well the value and the problem is the rendering of those values.

useEffect(() => {
  console.log("Menu items value:", menuItems);
},[menuItems])

answered Nov 6, 2023 at 22:21

Franco Mendo

663 bronze badges

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

1 Comment

Abraham Guerrero Over a year ago

Thanks! I did a bit more research on the topic and turns out state is also asynchronous, which is an important little bit of information I did not know. Your solution worked! Thank you for the help!

Collectives™ on Stack Overflow

React Native App only setting to state on second load

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related