在React中使用map()方法时如何正确获取异步数据？

我有一个帖子列表，需要遍历每个帖子获取关联的作者数据和头像URL。我有发起API调用的函数，调用后可返回这些信息，之后将username、full_name和avatar_url添加到对应帖子中，以便组件渲染时能获取完整数据。

以下是我写的自定义Hook：

// Custom hook to fetch the user & avatar for each post and combine them
function usePostsWithUserDetails(posts) {
  const [combinedPosts, setCombinedPosts] = useState([]);

  useEffect(() => {
    // Make async call for session & avatar_url that match the post
    const fetchData = async () => {
      const combineData = posts.map(async (post) => {
        const [user, avatar] = await Promise.all([
          getSessionProfile(post.user_id),
          fetchProfileAvatar(post.user_id),
        ]);
        // Add the needed data to the post
        post.username = user.username;
        post.full_name = user.full_name;
        post.avatar_url = avatar;
      });

      setCombinedPosts(combineData);
    };

    fetchData();
  }, [])

  return combinedPosts;
}

现在遇到的问题是：当尝试把数据添加到帖子（比如post.username = user.username）时，异步函数可能还没返回数据。我刚接触React，还没掌握按需返回Promise的方法。

我知道一般要在useEffect拿到返回数据后再处理，但问题是要对每个帖子都执行这个操作。我能想到的另一种方案是创建帖子时就把所需数据存入表中，但后续还是会有跨表查询和数据合并的需求，希望得到相关指导。

1. 修复当前Hook的异步处理问题 #

你当前代码的核心问题是：posts.map(async (post) => { ... })返回的是Promise数组，直接将其存入状态并不会得到合并后的帖子数据，因为这些Promise还未完成。需要用Promise.all等待所有异步请求结束后再更新状态，同时避免修改原数据对象：

import { useState, useEffect } from 'react';

function usePostsWithUserDetails(posts) {
  const [combinedPosts, setCombinedPosts] = useState([]);
  const [isLoading, setIsLoading] = useState(true); // 新增加载状态，方便组件处理

  useEffect(() => {
    const fetchData = async () => {
      try {
        // 等待所有帖子的异步请求完成，拿到最终合并数据
        const mergedPosts = await Promise.all(
          posts.map(async (post) => {
            // 并行请求用户信息和头像
            const [user, avatar] = await Promise.all([
              getSessionProfile(post.user_id),
              fetchProfileAvatar(post.user_id),
            ]);
            // 返回新对象，不修改原post，避免副作用
            return {
              ...post,
              username: user.username,
              full_name: user.full_name,
              avatar_url: avatar,
            };
          })
        );
        setCombinedPosts(mergedPosts);
      } catch (error) {
        console.error('加载用户详情失败:', error);
      } finally {
        setIsLoading(false);
      }
    };

    // 帖子为空时直接结束加载
    if (posts.length > 0) {
      fetchData();
    } else {
      setIsLoading(false);
    }
  }, [posts]); // 依赖项添加posts，帖子列表变化时重新执行

  // 返回合并后的数据和加载状态，组件可根据状态渲染对应UI
  return { combinedPosts, isLoading };
}

关键调整点：

• 用await Promise.all()等待所有异步操作完成，确保拿到的是合并后的帖子数组
• 不直接修改原post对象，而是返回新对象，避免污染原始数据
• 新增isLoading状态，让组件能处理加载中的过渡UI（比如加载动画）
• 将posts加入useEffect依赖数组，确保帖子列表更新时重新触发数据合并

2. 数据合并的优化方案 #

前端优化

• 缓存请求结果：如果同一个用户的帖子多次出现，重复调用API会浪费资源。可以用useMemo或者专门的状态管理库（如React Query、SWR）缓存用户数据，避免重复请求。
  例如用React Query实现缓存：

  import { useQuery } from '@tanstack/react-query';
  
  // 复用的用户信息查询Hook
  function useUserProfile(userId) {
    return useQuery({
      queryKey: ['user-profile', userId],
      queryFn: () => getSessionProfile(userId),
      staleTime: 5 * 60 * 1000, // 5分钟内使用缓存数据
    });
  }
  
  // 复用的用户头像查询Hook
  function useUserAvatar(userId) {
    return useQuery({
      queryKey: ['user-avatar', userId],
      queryFn: () => fetchProfileAvatar(userId),
      staleTime: 5 * 60 * 1000,
    });
  }
  

  后续处理帖子时，相同user_id的请求会直接读取缓存，无需重复调用API。

后端优化

• 合并API接口：如果有权限修改后端，建议新增一个接口，一次性返回帖子列表及关联的用户信息、头像URL。后端可以通过JOIN查询关联帖子表和用户表，直接返回包含完整数据的结果，减少前端多次请求的开销。
• 冗余字段存储：如果业务允许，可在创建/更新帖子时，将username、full_name、avatar_url冗余存储到帖子表中。但要注意数据一致性，比如用户修改昵称或头像时，需要同步更新所有相关帖子的冗余字段。

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