react-router中的useloaderdata()是否解析promise？

Question

<Route index element={<BlogPostsPage />} loader={blogPostLoader} />

博客页面

function BlogPostsPage() {
  const posts = useLoaderData() 

  return (
    <>
      <h1>Our Blog Posts</h1>

      <Posts blogPosts={posts} />
    </>
  );
}

export function loader () {
  return getPosts() 
}

getPosts()

export async function getPosts() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  if (!response.ok) {
    throw { message: 'Failed to fetch posts.', status: 500 };
  }
  
  return response.json();
}

我的主要疑问是，由于我们在加载器函数中返回一个承诺，因此

useLoaderData()

是否可以为我们解决它，因为我们不等待数据？

这是我的疑问。

Answer 1

useLoaderData

钩子不会解析从加载函数返回的任何Promise，它只是返回从加载函数返回的（已解决）值。

每个路由可以定义一个“loader”函数，为路由提供数据 元素在渲染之前。 （强调我的）

loader

在渲染路由（和

element

组件）之前调用，因此在渲染路由时，所有 Promise 都已解决。换句话说......所有“等待”都是在加载器函数和路由器中完成的，组件被安装/渲染，数据在组件中立即可用。

Answer 2

useLoaderData

不启动获取。它只是读取 React Router 内部管理的 fetch 结果，因此当它因路由之外的原因重新渲染时，您无需担心它会重新获取。

您可以在以下位置找到更多详细信息：https://reactrouter.com/en/main/hooks/use-loader-data

Answer 3

如果您想返回

Promise

，可以使用

defer

：https://reactrouter.com/en/main/guides/deferred

基本上，一旦您使用

Promise

返回

defer

，您就可以使用

React.Suspense

作为后备（加载指示器），并在

Await (by react-router-dom)

解析后使用

Promise

来渲染组件。

这是指南的快照

import {
  Await,
  defer,
  useLoaderData,
} from "react-router-dom";
import { getPackageLocation } from "./api/packages";

async function loader({ params }) {
  const packageLocationPromise = getPackageLocation(
    params.packageId
  );

  return defer({
    packageLocation: packageLocationPromise,
  });
}

export default function PackageRoute() {
  const data = useLoaderData();

  return (
    <main>
      <h1>Let's locate your package</h1>
      <React.Suspense
        fallback={<p>Loading package location...</p>}
      >
        <Await
          resolve={data.packageLocation}
          errorElement={
            <p>Error loading package location!</p>
          }
        >
          {(packageLocation) => (
            <p>
              Your package is at {packageLocation.latitude}{" "}
              lat and {packageLocation.longitude} long.
            </p>
          )}
        </Await>
      </React.Suspense>
    </main>
  );
}

祝你好运！！！