React JS 多个 API 调用、数据未定义或意外的保留字'await'映射数据：

Question

我正在创建一个JS函数，该函数将对API进行调用，循环返回的数据，并执行另一个调用以检索有关初始数据的更多信息(例如，如果第一个调用返回ID，第二个调用将返回ID对应的名称/地址/号码(。然而，事实证明，定位async和await关键字比我想象的更具挑战性：

useEffect(() => {
const getAppointments = async () => {
try {
const { data } = await fetchContext.authAxios.get('/appointments/' + auth.authState.id);

const updatedData = await data.map(value => {
const { data } = fetchContext.authAxios.get('/customerID/' + value.customerID);
return {
...value, // de-structuring
customerID: data
}
}
);

setAppointments(updatedData);
} catch (err) {
console.log(err);
}
};
getAppointments();
}, [fetchContext]);

除了customerID之外，还会显示所有内容，从而生成undefined。我试图在不同的地方定位和添加async/await关键字，但没有任何效果。我错过了什么？

Answer 1

map返回一个数组，而不是promise。你需要得到一系列承诺，然后解决它(此外，如果你的方式奏效，等待请求然后启动下一个请求将是低效的。(

const promises = data.map(async (value) => {
const { data } = await fetchContext.authAxios.get('/customerID/' + value.customerID);
return {
...value,
customerID: data
};
});
const updatedData = await Promise.all(promises);