React项目中：为何map函数内获取的数据无法在外部调用？

核心问题拆解 #

你的代码存在三个关键问题：

• 异步处理逻辑错误：fav.map(async (id) => { ... }) 会返回一组Promise对象，而非直接的食谱数据，直接遍历无法同步获取结果
• 变量作用域限制：res 是try代码块内的局部变量，在map外部完全无法访问，导致setNewArr中的res未定义
• 状态更新时机错误：你在map执行后立刻调用setNewArr，但此时所有API请求还处于异步pending状态，根本没有拿到返回数据

修正后的代码 #

const getMyList = async () => {
  try {
    // 用Promise.all等待所有API请求完成，拿到完整的食谱数据数组
    const recipeList = await Promise.all(
      fav.map(async (id) => {
        // 注意将ID拼接到API地址（示例为Spoonicular的详情接口格式）
        const { data: res } = await axios.get(`https://api.spoonacular.com/recipes/${id}/information`);
        return res;
      })
    );
    // 所有请求完成后统一更新状态
    setNewArr(recipeList);
  } catch (error) {
    console.log('获取收藏食谱失败:', error);
  }
};

useEffect(() => {
  getMyList();
}, [fav]); // 添加fav作为依赖，收藏列表变化时自动重新请求

关键修改说明 #

• 将getMyList声明为async函数，支持内部使用await等待异步操作
• 用Promise.all批量处理所有API请求的Promise，确保所有请求完成后再拿到完整数据数组
• 把状态更新放在await Promise.all之后，保证拿到有效数据后再更新页面
• 给useEffect添加fav依赖项，当本地存储的收藏ID列表变化时，自动重新请求并更新展示
• 补充了URL拼接逻辑（原代码未使用id，需根据Spoonicular API规范将ID插入请求地址）

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