`<Await>`

若要開始使用串流資料，請查看串流指南。

<Await> 元件負責解析從 useLoaderData 存取的延遲載入器 Promise。

import { Await } from "@remix-run/react";

<Suspense fallback={<div>Loading...</div>}>
  <Await resolve={somePromise}>
    {(resolvedValue) => <p>{resolvedValue}</p>}
  </Await>
</Suspense>;

屬性

`resolve`

resolve 屬性接收來自 useLoaderData 的 Promise，以便在資料串流傳入時解析。

<Await resolve={somePromise} />

當 Promise 尚未解析時，會渲染父 Suspense 邊界的後備內容。

<Suspense fallback={<div>Loading...</div>}>
  <Await resolve={somePromise} />
</Suspense>

當 Promise 解析後，將會渲染 children。

`children`

children 可以是渲染回呼函式或 React 元素。

<Await resolve={somePromise}>
  {(resolvedValue) => <p>{resolvedValue}</p>}
</Await>

如果 children 屬性是 React 元素，則可以在子樹中使用 useAsyncValue 存取解析後的值。

<Await resolve={somePromise}>
  <SomeChild />
</Await>

import { useAsyncValue } from "@remix-run/react";

function SomeChild() {
  const value = useAsyncValue();
  return <p>{value}</p>;
}

`errorElement`

當 Promise 拒絕時，可以使用 errorElement 屬性來渲染錯誤邊界。

<Await errorElement={<div>Oops!</div>} />

可以使用 useAsyncError 在子樹中存取錯誤。

<Await errorElement={<SomeChild />} />

import { useAsyncError } from "@remix-run/react";

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