React中使用fetch循环拉取多页API数据如何避免数组嵌套

• 当前代码在更新setPosts时，直接将每页返回的data.posts数组作为单个元素追加到已有数组尾部，导致出现嵌套结构：你截图中索引20的位置存储的是完整的第二页数组，而非单条帖子数据，和预期的平级结构不符。

只需要修改状态更新的逻辑，对data.posts也做展开操作，即可把每页的所有帖子逐项追加到数组中，得到全平级的结构：

const getPosts = () => {
  for (let i = 1; i < 6; i++) {
    fetch(`/api/posts?page=${i}`)
      .then((res) => res.json())
      .then((data) => setPosts(prevPosts => [...prevPosts, ...data.posts])) // 对data.posts做展开处理
      .catch((error) => console.log('Error fetching posts', error));
  } 
};

当前实现是并行发起5个请求，接口返回顺序不受控制，可能出现后页数据排在前页前面的问题。如果需要严格按照页码顺序排列数据，可以用Promise.all批量处理所有请求：

const getPosts = async () => {
  try {
    // 生成5页对应的请求实例
    const requestList = Array.from({length:5}, (_,idx) => 
      fetch(`/api/posts?page=${idx+1}`).then(res => res.json())
    );
    // 按请求顺序批量获取所有页的返回结果
    const allPageData = await Promise.all(requestList);
    // 合并所有页的帖子数据为平级数组
    setPosts(allPageData.flatMap(page => page.posts));
  } catch (error) {
    console.log('Error fetching posts', error);
  }
};

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