React Router Loader数据获取异常：API空响应问题求助

核心问题分析 #

你的代码存在三个关键错误，导致前端无法正确获取并渲染图书数据：

1. Loader中defer的使用错误
   defer接受的是Promise实例，而非异步函数本身。你传入的loadBooks是函数，而非调用后返回的Promise，导致组件拿到的是函数而非待解析的异步数据。

2. useLoaderData的取值错误
   useLoaderData()返回的是defer包装后的对象（结构为{ books: Promise }），你直接将其赋值给books，此时Array.isArray(books)必然为false，过滤后的数组始终为空。

3. Await组件的resolve目标错误
   你将整个defer对象传给Await的resolve属性，而非对象中存储Promise的books属性，导致Await无法正确监听数据解析状态。

修复步骤 #

1. 修正Loader函数 #

将loadBooks改为调用形式，传入Promise实例给defer：

async function loadBooks() {
  const response = await fetch("https://localhost:7276/GetAll");

  if (!response.ok) {
    throw new Error("Something went wrong");
  } else {
    const data = await response.json();
    return data;
  }
}

export function loader() {
  return defer({
    books: loadBooks(), // 调用函数获取Promise，而非传入函数本身
  });
}

2. 修正HomePage组件逻辑 #

在Await的回调中处理已解析的数据，确保过滤逻辑在数据就绪后执行：

const HomePage = () => {
  const deferredData = useLoaderData();

  return (
    <>
      <Carousel carouselData={DUUMY_CAROUSELITEMS} />

      <Await resolve={deferredData.books}>
        {(resolvedBooks) => {
          const bestOfMonthBooks = resolvedBooks.filter(book => !book.newRelease);
          const newReleaseBooks = resolvedBooks.filter(book => book.newRelease);
          return (
            <>
              <ListOfBooks books={bestOfMonthBooks} category="Best of month" />
              <ListOfBooks books={newReleaseBooks} category="New releases" />
            </>
          );
        }}
      </Await>
    </>
  );
};

export default HomePage;

额外检查点 #

• 确认后端已配置CORS，允许前端域名跨域请求（Swagger能正常调用说明后端接口本身没问题，但仍需确认前端域名在CORS白名单内）。
• 检查fetch的URL是否完全正确（端口、路径拼写与Swagger一致）。
• 确认后端Book类的属性可被正确序列化（Swagger能返回正确数据则此点可忽略）。

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