在React useEffect 中高效管理并发异步操作与状态更新

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

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

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

  useEffect(() => {
    // 1. 定义获取单本书籍信息的异步函数
    // 该函数现在只负责获取数据并返回，不直接修改组件状态
    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(`Failed to fetch book ${bookId}:`, error);
        // 可以选择返回null或抛出错误，具体取决于错误处理策略
        return null; 
      }
    };

    // 2. 定义获取所有书籍ID并进一步获取书籍详情的异步主函数
    const fetchAllBooks = async () => {
      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();

        // 将每个bookId映射到一个getBookInfo的Promise
        // Promise.all会等待所有这些Promise完成
        const fetchedBooks = await Promise.all(
          bookIds.map(async (bookId) => getBookInfo(bookId))
        );

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

        // 3. 一次性更新books状态
        setBooks(validBooks);

      } catch (error) {
        console.error("Failed to fetch reading list or book details:", error);
        // 在发生错误时，也需要将加载状态设置为false，并可能显示错误信息
        setBooks([]); // 清空书籍列表
      } finally {
        // 无论成功或失败，最后都将加载状态设置为false
        setIsLoading(false);
      }
    };

    fetchAllBooks();

    // 清理函数（可选但推荐）：如果组件在请求完成前卸载，取消请求
    // 实际的取消操作需要AbortController等机制，这里仅作示意
    return () => {
      // 例如：cancelFetchRequests();
    };

  }, [userID]); // 依赖项数组包含userID，当userID变化时重新运行effect

  return (
    <ContentLayout>
      <BookDisplay>
        {isLoading ? (
          <div>Loading books...</div>
        ) : (
          <BookSection name={"Your Reading List"} books={books}></BookSection>
        )}
      </BookDisplay>
    </ContentLayout>
  );
}