<Await>

要开始使用流数据，请查看 Streaming 指南。

¥To get started with streaming data, check out the Streaming Guide.

<Await> 组件负责解析从 useLoaderData 访问的延迟加载器promise。

¥The <Await> component is responsible for resolving deferred loader promises accessed from useLoaderData.

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

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

属性

¥Props

resolve

resolve 属性接收来自 useLoaderData 的 promise，以便在数据流入后进行解析。

¥The resolve prop takes a promise from useLoaderData to resolve when the data has streamed in.

<Await resolve={somePromise} />

当promise未得到解决时，将渲染父级 Suspense 边界的 fallback。

¥When the promise is not resolved, a parent suspense boundary's fallback will be rendered.

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

当 Promise 被解析后，children 将被渲染。

¥When the promise is resolved, the children will be rendered.

children

children 可以是渲染回调或 React 元素。

¥The children can be a render callback or a React element.

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

如果 children props 是 React 元素，则解析后的值将可通过子树中的 useAsyncValue 访问。

¥If the children props is a React element, the resolved value will be accessible through useAsyncValue in the subtree.

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

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

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

errorElement

errorElement 属性可用于在 Promise 拒绝时渲染错误边界。

¥The errorElement prop can be used to render an error boundary when the promise rejects.

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

可以使用 useAsyncError 在子树中访问错误

¥The error can be accessed in the subtree with useAsyncError

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

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

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