Блог

Я пытаюсь извлечь данные из API и столкнулся с проблемой. Функция fetchCountryData не помогает отладить проблему, поскольку любые точки останова внутри нее игнорируются. Как мне перейти к асинхронной функции?

 const [countryData, setCountryData] = React.useState([]);
const [borderCountries, setBorderCountries] = React.useState([]);

React.useEffect(() => {
    fetchCountryData();
}, [])

async function fetchCountryData() {
    /* fetch country by Name */
    const response = await 
        fetch(`https://restcountries.eu/rest/v2/name/${match.params.country}
               ?fields=${URL_FIELD_QUERIES}`);

    const fetchedData = await response.json();
        
    /* check if query by name returned multiple countries (the api unwillingly does that for some countries!) */
    let index = fetchedData.length === 1
                    ?   0   :   filterRequiredCountry(fetchedData, match.params.country);

    setCountryData(fetchedData[index]);

        
    /* .map() will run 'fetchNeighborName' function for each borders' item */
    const promises = fetchedData[index].borders.map(fetchNeighborName);

    /* the above promises will be resolved by Promise.all() */
    const neighborNames = await Promise.all(promises);

    setBorderCountries(neighborNames);
}

/* Extract 'alphaCode' for each bordered country and fetch its real name */

async function fetchNeighborName(alphaCode) {
    return fetch(`https://restcountries.eu/rest/v2/alpha/${alphaCode}?fields=name`)
        .then(response => response.json())
        .then(data => data.name);
}

function filterRequiredCountry(fetchedData, requiredCountry) {
    let requiredIndex;

    for (let index = 0; index < fetchedData.length; index  ) {

        if (fetchedData[index].name === requiredCountry.toLowerCase()) {
            requiredIndex = index; break;
        }
    }
}