`<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，该 promise 在数据流入时解析。

<Await resolve={somePromise} />

当 promise 未解析时，将渲染父级悬念边界的后备。

<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`

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

<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>;
}