Saya ingin mengambil data sebelum layar ditampilkan sehingga saya dapat menampilkan data yang diambil dalam daftar datar. tapi itu tidak bekerja. bagaimana saya bisa memperbaiki masalah itu?

export default function NewRecipe() {

  const user = useContext(AuthContext);


  const [userIngredients, setUserIngredients] = useState([]);
  const [userRecipes, setUserRecipes] = useState([]);


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

  var apiKey = "ab9b5a9a88c445a8a41206991fd88f42"

  function fetchRecipes(userIngredients) {
    var number = 5
    var url = "https://api.spoonacular.com/recipes/findByIngredients?ingredients=" + userIngredients.join(",") + "&number=" + String(number) + "&apiKey=" + apiKey
    fetch(url, {
      method: "GET"
    }).then((response) => response.json())
      .then((responseJson) => {
        if (responseJson && responseJson.length > 0) {
          for (var i = 0; i < number; i++) {
            var newRecipe = {
              id: responseJson[i].id,
              title: responseJson[i].title,
              image: responseJson[i].image,
              ingredients: userIngredients
            }
            userRecipes.unshift(newRecipe)
          }
          firebase.firestore().doc("ingredients/" + user.uid).update({
            recipes: userRecipes
          })
          console.log("Rezepte", userRecipes)
        }
        else {
          console.log("hdf")
        }
      }).catch((error) => {
        console.error(error);
      })
  }

  const renderRecipe = ({ item }) => {
    console.log(item)
    return (
      <View style={styles.item} >
        <View >
          <Text style={{ color: '#fff' }}>{item.title}</Text>
        </View>
      </View >
    )
  }

  console.log(1)

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => fetchRecipes(userIngredients)}><Text>Press</Text></TouchableOpacity>
      <FlatList
        data={userRecipes}
        renderItem={renderRecipe}
        keyExtractor={(item) => item.id}>
      </FlatList>
    </View >
  );
}

Dalam fungsi fetchIngredient saya mengambil resep dari api dan saya mendapatkan datanya. tetapi itu hanya menampilkan item selama 2 detik ketika saya menyimpan file. saya ingin item dirender ketika saya tab ke layar di tabbottombar saya

0
KevinRump 2 September 2020, 11:30

1 menjawab

Jawaban Terbaik

Anda mengubah status userRecipes dalam fungsi fetchRecipes.

Anda dapat melakukan sesuatu seperti ini

if (responseJson && responseJson.length > 0) {
   const newRecipes = []
   for (var i = 0; i < number; i++) {
       const newRecipe = {
           id: responseJson[i].id,
           title: responseJson[i].title,
           image: responseJson[i].image,
           ingredients: userIngredients
       }
       newRecipes.unshift(newRecipe) // adding in a temporary array
   }
   setUserRecipes(newRecipes) // updating the state without mutating.

   firebase.firestore().doc("ingredients/" + user.uid).update({
       recipes: newRecipes
   })
}
2
Rajesh 2 September 2020, 08:51