React Native：useState() 不會立即改變？

Question

我希望我的函數能夠立即更新userIngredients這樣我就可以在渲染屏幕后使用它。

 async function getUserData() { var userData = await firebase.firestore().doc("ingredients/" + user.uid).get(); var labels = [] userData.data().ingredients.forEach(ingredient => { labels.push(ingredient.label) }) setUserIngredients(labels) setUserRecipes(userData.data().recipes) console.log(userIngredients) }

userIngredients是空的，這就是為什么我的提取不起作用。 那么我該如何解決這個問題？

Answer 1

setState() 是異步的。 這意味着您將無法在更改其值的同一渲染上獲取有關 userIngredients 狀態的數據。 要獲得該值，您需要等待另一個渲染。

如果您不想在數據為空時呈現屏幕。 使用條件渲染，如：

if(!userIngredients) return <Spinner/> // or some loading component
return (<Actual Screen/>)

Answer 2

 async function getUserData() { var userData = await firebase.firestore().doc("ingredients/" + user.uid).get(); var labels = await userData.data().ingredients.map(({label})=>label) setUserIngredients(labels) setUserRecipes(userData.data().recipes) console.log(userIngredients) }