嵌套Axios调用获取Promise值并赋值给React useState Hook的问题问询

错误原因 #

• 初始版本中getCurrencyValue是异步函数，执行后默认返回Promise对象，直接赋值给value字段自然无法拿到实际的汇率数值
• 二次修改版本触发多次setCurrencies时，由于React状态更新的异步批量特性，每次调用拿到的都是初始的currencies状态快照，后续更新会覆盖之前的结果，最终仅保留最后一条数据

正确实现 #

你可以先拉取全量货币名称，再通过Promise.all并行请求所有货币的汇率，待所有请求完成后一次性更新状态，示例代码如下：

const [currencies, setCurrencies] = useState([]);

// 拉取货币名称列表的方法
const getCurrencyNames = async () => {
  try {
    // 第一步：获取所有货币名称
    const nameRes = await axios({
      method: 'get',
      url: `${url}/getCurrencies`
    });
    const currencyNames = nameRes.data;

    // 第二步：并行发起所有汇率查询请求，等待全部返回
    const currencyList = await Promise.all(
      currencyNames.map(async (currency) => {
        const valueRes = await axios({
          method: 'get',
          url: `${url}/getValue/?from=PHP&to=${currency}`
        });
        return {
          name: currency,
          value: valueRes.data
        }
      })
    );

    // 第三步：一次性更新状态
    setCurrencies(currencyList);
  } catch (err) {
    // 可自行添加错误处理逻辑
    console.error('请求失败：', err);
  }
}

// 单个汇率查询方法可按需求保留复用
const getCurrencyValue = async (currency) => {
  const res = await axios({
    method: 'get',
    url: `${url}/getValue/?from=PHP&to=${currency}`   
  });
  return res.data;
}

补充说明 #

如果货币数量较多，可根据需求调整为串行请求，或添加请求 Loading 状态提升用户体验。

内容的提问来源于stack exchange，提问作者Kim Joseph Penaloza