Reactjs 根据第一个API响应为每个数组元素发出API请求

我目前正在学习如何在React JS with hooks中使用async/await。我正在尝试对

https://restcountries.eu/

。firs电话需要获得所选国家边界的信息。输出为[“CAN”，“MEX”]。然而，我需要得到这些边界的全名。这就是我想打第二个电话的原因。因为我有一个包含两项的数组，所以我需要为它们中的每一项进行一个新的API调用。我已经被这件事困扰了一段时间了。考虑到第一次调用中有一个数组，进行第二次调用的正确方法是什么

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

const App = () => {
    const [countryDetails, setCountryDetails] = useState({});
    const [borderNames, setBorderNames] = useState([]);

   //FIRST API CALL
    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios(
                    `https://restcountries.eu/rest/v2/name/usa?fullText=true`
                );
                setCountryDetails(response.data[0]);
            } catch (err) {
                console.log(err);
            }
        };
        fetchData();
    }, []);


    //SECONS API CALL - doens't work
    useEffect(() => {
        let borderName = [];
        countryDetails.borders.forEach(async border => {
            try {
                const response = await axios(
                    `https://restcountries.eu/rest/v2/alpha?codes=${border}`
                );
                borderName.push(response.data[0].name);
            } catch (err) {
                console.log(err);
            }
        });
     setBorderNames(borderName);
    }, [countryDetails]);

    console.log(countryDetails.borders); //Output: ["CAN", "MEX"]
    console.log(borderNames); //Output needs to be: ["Canada", "Mexico"]
 
    return (
        <div>
            <h2>App</h2>
        </div>
    );
};

export default App;

import React，{useffect，useState}来自“React”；
从“axios”导入axios；
常量应用=（）=>{
const[countryDetails，setCountryDetails]=useState（{}）；
const[borderNames，setboordernames]=useState（[]）；
//第一个API调用
useffect（（）=>{
const fetchData=async（）=>{
试一试{
常数响应=等待axios(
`https://restcountries.eu/rest/v2/name/usa?fullText=true`
);
setCountryDetails（response.data[0]）；
}捕捉（错误）{
控制台日志（err）；
}
};
fetchData（）；
}, []);
//SECONS API调用-不起作用
useffect（（）=>{
设borderName=[]；
countryDetails.borders.forEach（异步边框=>{
试一试{
常数响应=等待axios(
`https://restcountries.eu/rest/v2/alpha?codes=${border}`
);
borderName.push（response.data[0].name）；
}捕捉（错误）{
控制台日志（err）；
}
});
订单名称（borderName）；
}，[countryDetails]）；
console.log（countryDetails.borders）；//输出：[“CAN”，“MEX”]
console.log（borderNames）；//输出需要：[“加拿大”、“墨西哥”]
返回(
应用程序
);
};
导出默认应用程序；

您的第二次提取是异步的，因此，因为您不等待它，

useffect

在响应到达之前将

borderNames

设置为空数组（初始值）

除了等待响应之外，您还可以在

try

块中进行此更改：

const response = await axios(
   `https://restcountries.eu/rest/v2/alpha?codes=${border}`);

setBorderNames(prevState => prevState.push(response.data[0].name));

---

您的结构存在一些小问题，请查看此示例，您将发现：

const-App=（）=>{
const[countryDetails，setCountryDetails]=React.useState（{}）；
const[borderNames，setboordernames]=React.useState（[]）；
React.useffect（（）=>{
取回(`https://restcountries.eu/rest/v2/name/usa?fullText=true`)
.然后（（res）=>res.json（））
.然后（（数据）=>setCountryDetails（数据[0]））
.catch（（err）=>console.log（err））；
}, []);
React.useffect（（）=>{
设borderName=[]；
if（countryDetails.borders）{
countryDetails.borders.forEach（（border）=>
取回(`https://restcountries.eu/rest/v2/alpha?codes=${border}`）
.然后（（res）=>res.json（））
。然后（（数据）=>{
borderName.push（数据[0].name）；
if（borderName.length==countryDetails.borders.length）
订单名称（borderName）；
})
.catch（（err）=>console.log（err））
);
}
}，[countryDetails]）；
返回(
{JSON.stringify（countryDetails.borders）}

{JSON.stringify（borderNames）}

);
}
render（，document.getElementById（“react”）
一个简单的方法是：

useffect（（）=>{
const exec=async（）=>{
const borderNames=wait Promise.all（countryDetails.borders.map）（border=>{
返回axios.get(`https://restcountries.eu/rest/v2/alpha?codes=${border}`
}))
setBorderNames（borderNames.map（{data}）=>data[0].name））；
};
exec（）；
}，[countryDetails]）；
由于您正在等待第一个响应，因此只需使用相同的技术发送下一个响应，但要基于您刚从第一次呼叫中收到的数据