Question

  const [constructorHasRun, setConstructorHasRun] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
  const [userIngredients, setUserIngredients] = useState([]);
  const [userRecipes, setUserRecipes] = useState([]);

  const user = useContext(AuthContext);

  const constructor = (userIngredients) => {
    if (constructorHasRun) return;
    getUserData()
    fetchRecipes(userIngredients)
    setConstructorHasRun(true);
  };


  constructor(userIngredients)


  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)
  }

我想更新我的userIngredients，以便它显示我获取的内容，但要获取，我需要在userIngredients中提供一个值。 setState（）是异步的，所以我需要另一个渲染器来更新值。我该如何强迫？

Answer 1

根据我对代码的分析，从firebase获取数据后，您可以立即调用fetchRecipes：

async function getUserData() {
  var userData = await firebase.firestore().doc("ingredients/" + user.uid).get();
  var labels = await userData.data().ingredients.map(({ label }) => label)
  setUserIngredients(labels)
  fetchRecipes(labels) // <-- moved this here
  setUserRecipes(userData.data().recipes)
}

或在useEffect内并以userIngredients作为依赖项

useEffect(()=>{
  fetchRecipes(userIngredients)
}, [userIngredients])

React Native：如何强制重新渲染以更新我的userIngredients值？

1 个答案: