React中如何多次获取数据？Django全栈应用多请求实现疑问

原代码存在的问题 #

• 未用useState管理帖子列表，直接push修改数组不会触发组件重新渲染
• 遍历调用异步getPost时未处理异步逻辑，无法保证所有请求完成后统一更新数据
• 提取关注用户ID的逻辑过于繁琐，可简化

优化后的实现方案 #

1. 添加帖子状态管理：用useState维护帖子列表，确保数据变化时组件自动渲染
2. 简化关注用户ID提取：直接从following数据中提取目标ID，生成干净的ID数组
3. 批量异步请求处理：使用Promise.all同时发起所有请求，等待全部完成后统一更新帖子状态

import { useState, useEffect } from 'react';

const Home = ({ authToken, BASE_URL }) => {
  const [following, setFollowing] = useState([]);
  const [posts, setPosts] = useState([]); // 新增帖子状态

  // 获取关注用户列表
  const getFollowing = async () => {
    if (!authToken?.access) return;
    try {
      const response = await fetch(`${BASE_URL}profile/following/`, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          "Authorization": `Bearer ${authToken.access}`,
        }
      });
      const data = await response.json();
      setFollowing(data);
    } catch (error) {
      console.error("获取关注列表失败:", error);
    }
  };

  // 获取单个用户的帖子，返回数据
  const getPost = async (userId) => {
    try {
      const response = await fetch(`${BASE_URL}post/${userId}`, {
        method: "GET",
        headers: {
          "Authorization": `Bearer ${authToken.access}`,
          "Content-Type": "application/json"
        },
      });
      return await response.json(); // 返回数据，而非直接console
    } catch (error) {
      console.error(`获取用户${userId}帖子失败:`, error);
      return []; // 出错时返回空数组，避免影响整体结果
    }
  };

  // 批量获取所有关注用户的帖子
  const getAllPosts = async () => {
    if (!following.length) return;
    // 提取关注用户ID（根据你的following数据结构调整，这里假设每个item里的首个key对应用户ID）
    const userIds = following.map(item => item[Object.keys(item)[0]]);
    // 批量发起请求，等待所有请求完成
    const allPosts = await Promise.all(userIds.map(id => getPost(id)));
    // 合并所有帖子并按时间倒序排序（可选，根据需求调整）
    const mergedPosts = allPosts.flat().sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
    setPosts(mergedPosts);
  };

  // 组件挂载后先获取关注列表，再获取帖子
  useEffect(() => {
    getFollowing();
  }, [authToken]);

  // 当following变化时，重新获取帖子
  useEffect(() => {
    if (following.length) {
      getAllPosts();
    }
  }, [following]);

  return (
    <div>
      {/* 渲染帖子列表 */}
      {posts.map(post => (
        <div key={post.id} className="post-item">
          <h3>{post.title}</h3>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
};

export default Home;

关键改动说明 #

• 用useEffect实现自动触发逻辑：组件挂载/authToken变化时获取关注列表，following更新时自动拉取对应帖子
• 用Promise.all批量处理异步请求，比循环调用更高效，且能保证所有请求完成后再统一更新状态
• 新增posts状态，确保帖子数据变化时组件自动重新渲染
• 给getPost添加错误处理，单个请求失败不会影响其他请求的执行

额外建议 #

如果Django后端支持，建议新增一个批量获取关注用户帖子的接口（比如/post/following/），前端只需一次请求就能拿到所有数据，减少请求次数，提升整体性能。

内容的提问来源于stack exchange，提问作者Oula R.