React Native App 仅设置为第二次加载时状态

Question

我目前正在为我的课程做最后的准备，但我必须使用多个异步函数。我需要使用 AsyncStorage、SQLite 存储以及从 REST API 获取。我遇到的问题是当我必须从 REST API 获取数据并将其置于状态时。我不知道为什么，但它只在我第二次加载我的应用程序时才起作用。我可能会成为世博会的问题，但我对此表示怀疑。我只需要一些帮助。这是所有相关代码：

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();
        
},[]) 

我不知道为什么它只在我第二次加载应用程序时加载。如果有人有任何反馈或可以将我重定向到比课程更好地教我异步函数的资源，我将非常感激。甚至 React Native 的文档也说这就是你的做法，所以我非常困惑。

我之前曾尝试在 useEffect 挂钩内部定义函数，但这不起作用。我认为还值得注意的是，当我使用以下内容时：

console.log(Object.values(json.menu))

，它打印的正是我需要打印的内容，但是当我尝试将确切的值设置到我的

setMenuItems()

中时，它只是无法按照我的方式工作需要它。

Answer 1

从我在代码中看到的它应该可以工作，也许问题不是状态更新，而是呈现新的“menuItems”值的问题。 您可以使用以下代码检查第一次执行时是否很好地更新了状态，可能它很好地更新了值，问题在于这些值的渲染。

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