Await

用于呈现具有自动错误处理的延迟值。

import React from 'react';
import {Await, useLoaderData} from "react-router-dom";

export function Book() {
  const {book, reviews} = useLoaderData()
  return (
    <div>
      <h1>{book.title}</h1>
      <p>{book.description}</p>
      <React.Suspense fallback={<div>Loading reviews...</div>}>
        <Await resolve={reviews} errorElement="could not load reviews">
          {reviews => <Reviews item={reviews}/>}
        </Await>
      </React.Suspense>
    </div>
  );
}

注意：<Await/>期望再<React.Suspense>或<React.SuspenseList/>父级中呈现，以启用会退用户界面。

类型声明

declare function Await(
  props: AwaitProps
): React.ReactElement;

interface AwaitProps {
  children: React.ReactNode | AwaitResolveRenderFunction;
  errorElement?: React.ReactNode;
  resolve: TrackedPromise | any;
}

interface AwaitResolveRenderFunction {
  (data: Awaited<any>): React.ReactElement;
}

children

可以是React元素或函数，使用函数时，值作为唯一参数提供。使用React元素时，useAsyncValue将提供数据。

函数模式

<Await resolve={reviewsPromise}>
  {(resolvedReviews) => <Reviews items={resolvedReviews} />}
</Await>

React元素模式

<Await resolve={reviewsPromise}>
  <Reviews />
</Await>;

function Reviews() {
  const resolvedReviews = useAsyncValue();
  return <div>{/* ... */}</div>;
}

errorElement

当Promise被拒绝时，错误元素将呈现。你可以使用useAsyncError访问错误。

如果Promise被拒绝，你可以通过useAsyncError钩子提供可选的errorElement来处理上下文UI中的错误。

<Await
  resolve={reviewsPromise}
  errorElement={<ReviewsError />}
>
  <Reviews />
</Await>;

function ReviewsError() {
  const error = useAsyncError();
  return <div>{error.message}</div>;
}

如果你不提供errorElement，被拒绝的值将会冒泡到最近的路由级别errorElement，并可通过useRouterRrror钩子访问。

resolve

接受从延迟加载器返回的promise，进行解析和渲染。

import {defer, Route, useLoaderData, Await,} from "react-router-dom";

<Route
  loader={async () => {
    let book = await getBook();
    let reviews = getReviews(); // not awaited
    return defer({
      book,
      reviews,
    });
  }}
  element={<Book/>}
/>;

function Book() {
  const {book, reviews,} = useLoaderData();
  return (
    <div>
      <h1>{book.title}</h1>
      <p>{book.description}</p>
      <React.Suspense fallback={<ReviewsSkeleton/>}>
        <Await
          // and is the promise we pass to Await
          resolve={reviews}
        >
          <Reviews/>
        </Await>
      </React.Suspense>
    </div>
  );
}