我目前正在尝试理解如何在React JS中使用async/await。在这个演示应用程序中，我试图通过调用https://restcountries.eu/来获取所选国家的完整边界名称。我进行第一个API调用以获取有关国家的信息，第二个API调用以获取其边界的全名，因为第一个API调用仅返回短边界名称。我相信有一种方法可以将这些调用组合在一个useEffect中，但是我所尝试的一切都给了我某种错误或陷入无限循环。如何将这些调用与async/await方法结合起来？

import React, { useState, useEffect } from "react";
import Axios from "axios";

const App = () => {
    const [loading, setLoading] = useState(true);
    const [country, setCountry] = useState({});
    const [fullBorderNames, setFullBorderNames] = useState([]);

    //FIRST API CALL
    useEffect(() => {
        const source = Axios.CancelToken.source();
        const fetchData = async () => {
            setLoading(true);
            try {
                const response = await Axios(
                    `https://restcountries.eu/rest/v2/name/canada?fullText=true`,
                    { cancelToken: source.token }
                );
                setCountry(response.data[0]);
            } catch (err) {
                if (Axios.isCancel(err)) {
                    console.log("Axios canceled");
                } else {
                    console.log(err);
                }
            }
        };
        fetchData();
        return () => source.cancel();
    }, []);

    //SECOND API CALL
    useEffect(() => {
        const source = Axios.CancelToken.source();
        let borders = [];
        if (country.borders) {
            const fetchData = async () => {
                try {
                    country.borders.forEach(async border => {
                        const response = await Axios(
                            `https://restcountries.eu/rest/v2/alpha?codes=${border}`,
                            { cancelToken: source.token }
                        );
                        borders.push(response.data[0].name);
                        if (borders.length === country.borders.length)
                            setFullBorderNames(borders);
                    });
                } catch (err) {
                    if (Axios.isCancel(err)) {
                        console.log("Axios canceled");
                    } else {
                        console.log(err);
                    }
                }
                setLoading(false);
            };
            fetchData();
        }
        return () => source.cancel();
    }, [country.borders]);

    if (loading) {
        return <h2>Loading</h2>;
    } else {
        return (
            <>
                <pre>{JSON.stringify(country, null, 2)}</pre>
                <pre>{JSON.stringify(fullBorderNames, null, 2)}</pre>
            </>
        );
    }
};

export default App;

字符串