在 React useEffect 中高效管理多个异步请求并更新状态

function ReadingListPage({ userID }) {
  const [books, setBooks] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  let bookIds = [];

  useEffect(() => {
    const getBookInfo = async (bookId) => {
      const response = await fetch(`https://www.googleapis.com/books/v1/volumes/${bookId}`);
      const resJson = await response.json();
      // 问题所在：在循环中直接更新状态
      setBooks([...books, resJson]); 
      Promise.resolve(); // 此处 Promise.resolve() 并无实际作用
    };

    const getBookIds = async () => {
      const response = await fetch(`//localhost:3001/user/reading_list/${userID}`);
      const resJson = await response.json();
      bookIds = resJson;

      await Promise.all(
        bookIds.map(async (bookId) => {
          await getBookInfo(bookId);
        })
      );

      // 问题所在：虽然 Promise.all 等待了，但 setBooks 的行为是异步的且可能基于旧状态
      setIsLoading(false); 
    };

    getBookIds();
  }, []);

  // ... JSX 渲染部分
}

import React, { useState, useEffect } from 'react';

// 假设 ContentLayout 和 BookDisplay, BookSection 是已定义的组件
// import { ContentLayout, BookDisplay, BookSection } from './components'; 

function ReadingListPage({ userID }) {
  const [books, setBooks] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 1. getBookInfo 仅负责获取单个书籍数据并返回
    const getBookInfo = async (bookId) => {
      try {
        const response = await fetch(`https://www.googleapis.com/books/v1/volumes/${bookId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const book = await response.json();
        return book; // 返回获取到的书籍数据
      } catch (error) {
        console.error(`Error fetching book ${bookId}:`, error);
        return null; // 发生错误时返回 null 或其他指示
      }
    };

    const getBookIds = async () => {
      setIsLoading(true); // 确保每次获取数据前都设置为加载状态
      try {
        // 获取书籍 ID 列表
        const response = await fetch(`//localhost:3001/user/reading_list/${userID}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const bookIds = await response.json();

        // 2. 使用 Promise.all 并行获取所有书籍详情，并聚合结果
        const allBooksData = await Promise.all(
          bookIds.map(async (bookId) => getBookInfo(bookId))
        );

        // 过滤掉可能因错误而返回 null 的项
        const validBooks = allBooksData.filter(book => book !== null);

        // 3. 一次性更新 books 状态
        setBooks(validBooks);
      } catch (error) {
        console.error("Error in getBookIds process:", error);
        setBooks([]); // 错误时清空书籍列表
      } finally {
        // 4. 在所有操作完成后，最终更新加载状态
        setIsLoading(false);
      }
    };

    getBookIds();
    // 依赖数组为空，表示只在组件挂载时执行一次
  }, [userID]); // 如果 userID 变化需要重新获取，则将其加入依赖数组

  return (
    {/* 假设 ContentLayout 和 BookDisplay 是已定义的组件 */}
    {/* <ContentLayout>
      <BookDisplay>
        {isLoading ? (
          <div>加载中...</div>
        ) : (
          <BookSection name={"Your Reading List"} books={books}></BookSection>
        )}
      </BookDisplay>
    </ContentLayout> */}
    <div>
      {isLoading ? (
        <div>加载中...</div>
      ) : (
        books.length > 0 ? (
          <div>
            <h3>您的阅读列表</h3>
            {books.map((book, index) => (
              <div key={book.id || index}>
                <h4>{book.volumeInfo?.title}</h4>
                <p>{book.volumeInfo?.authors?.join(', ')}</p>
                {/* 更多书籍信息 */}
              </div>
            ))}
          </div>
        ) : (
          <div>没有找到书籍。</div>
        )
      )}
    </div>
  );
}

export default ReadingListPage;