React中useEffect返回Promise而非值的问题求助

代码示例 #

let currencyValues = [];

const retrieveCurrencyPairs = async (pair) => {
    const r = await fetch(pair.url);
    const rParsed = await r.json();
    let newCurrencyValue = { currency: pair.countries, value: rParsed };
    return newCurrencyValue;
};

useEffect(() => {
    currencyValues = currencyPairs.map(retrieveCurrencyPairs);
    console.log(currencyValues);
}, []);

预期效果 #

• 页面加载时，useEffect触发map中的函数
• 对数组中的每个值，调用retrieveCurrencyPairs()并等待结果返回
• currencyValues数组最终填充3个新对象

实际问题 #

map返回的是Promise数组而非预期的对象数组，请问如何修改？

核心问题是**async函数本身会返回Promise**，直接用map遍历调用后，得到的是一堆Promise实例，不是最终的对象结果。需要结合Promise.all和异步回调处理：

1. 改用React状态管理currencyValues（普通变量更新不会触发组件渲染，若需渲染数据必须用useState）
2. 在useEffect内部定义异步函数，用Promise.all等待所有请求完成

修改后的代码：

import { useState, useEffect } from 'react';

// 用useState管理状态，确保数据更新后组件能重新渲染
const [currencyValues, setCurrencyValues] = useState([]);

const retrieveCurrencyPairs = async (pair) => {
    const r = await fetch(pair.url);
    const rParsed = await r.json();
    return { currency: pair.countries, value: rParsed };
};

useEffect(() => {
    // 定义内部异步函数，useEffect回调不能直接标记为async
    const fetchAllCurrencies = async () => {
        // Promise.all等待所有异步请求完成，返回结果数组
        const resolvedResults = await Promise.all(
            currencyPairs.map(retrieveCurrencyPairs)
        );
        setCurrencyValues(resolvedResults);
        console.log(resolvedResults);
    };

    fetchAllCurrencies();
}, []);

关键说明 #

• Promise.all(iterable)会等待传入的所有Promise都成功resolve后，返回包含所有结果的数组，顺序和原Promise数组一致
• useEffect的回调不能直接标记为async（会返回Promise，React无法处理），因此需要在内部定义异步函数并调用
• 用useState替代普通变量，保证数据更新后组件能同步渲染最新内容

内容的提问来源于stack exchange，提问作者Eric Mitjans