Estoy tratando de llamar a la API externa durante la primera vez que se procesa el componente y obtener la lista de todos los países con función asíncrona/espera. Sin embargo, recuperé el estado vacío después de llamar a la función setState. Soy bastante nuevo en RN y he estado atrapado en este problema durante días. Apreciado si alguien puede ayudar. Esto es lo que he estado tratando de hacer...

1. Llame a countryapi y obtenga el nombre del país y el iso2 (solo el nombre del país y el iso2 están disponibles en la respuesta)
2. Después de esa llamada, quiero obtener más detalles sobre ese país específico, como iso3 y la bandera del país, así que pasé el parámetro iso2.
3. Después de desestructurar para el país, iso3 y la bandera del país después de la segunda llamada a la API, llamé a setState cada vez que desestructuraba para ese país específico. Sin embargo, el estado no se actualiza.

 import React, { useState, useEffect } from "react"; import { Platform, Text, View, TextInput, StyleSheet, FlatList, } from "react-native"; import { FontAwesome } from "react-native-vector-icons"; import countryapi from "../src/countryapi"; const CountryScreen = () => { const [countryDetails, setCountryDetails] = useState([]); // Fetch country details { country name, iso3, iso2, country flag } const countrySearchAPI = async () => { try { const countriesData = await countryapi.get(); const countries = countriesData.data; for (const country in countries) { const { iso2 } = countries[country]; let countriesDetailsData = await countryapi.get(`/${iso2}`); let { name, iso3, emoji } = countriesDetailsData.data; setCountryDetails([ ...countryDetails, { countryName: name, iso3, iso2, countryFlag: emoji, }, ]); console.log(countryDetails); } } catch (e) { console.log(e); } console.log(countryDetails); }; useEffect(() => { countrySearchAPI(); }, []); return ( <View> <View style={styles.searchSection}> <FontAwesome name="search" size={30} /> <TextInput placeholder="Search for Country" style={styles.inputBox} /> </View> {/* <FlatList data={countryDetails} renderItem={({ item }) => { return ( <Text> {item.countryName} {item.countryFlag} </Text> ); }} keyExtractor={(item) => item.id.toString()} /> */} </View> ); };