Блог

Я пытаюсь вызвать внешний api в первый раз, когда компонент отображается, и получить список всех стран с функцией async/await. Однако я вернул пустое состояние после вызова функции setState. Я совсем новичок в RN и застрял в этой проблеме уже несколько дней. Буду признателен, если кто-нибудь сможет помочь. Вот что я пытался сделать…

1. Позвоните в countryapi и получите название страны и iso2 (в ответе доступны только название страны и iso2).
2. После этого звонка я хочу получить более подробную информацию об этой конкретной стране, такую как iso3 и флаг страны, поэтому я передал параметр iso2.
3. После того, как я разрушил для страны, iso3 и флага страны после второго вызова api, я вызывал setState каждый раз, когда я разрушал для этой конкретной страны. Однако состояние не обновляется.

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