跳转到内容
Remix Logo Remix Logo Remix 中文文档

useFetcher

useFetcher

用于与导航之外的服务器交互的钩子。

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


export function SomeComponent() {
  const fetcher = useFetcher();
  // ...
}

选项

key

默认情况下，useFetcher 会生成一个作用域为该组件的唯一提取器（但是，在运行过程中可能会在 useFetchers() 中查找它）。如果您想使用自己的密钥标识提取器，以便可以从应用程序的其他地方访问它，则可以使用 key 选项来实现：

function AddToBagButton() {
  const fetcher = useFetcher({ key: "add-to-bag" });
  return <fetcher.Form method="post">...</fetcher.Form>;
}


// Then, up in the header...
function CartCount({ count }) {
  const fetcher = useFetcher({ key: "add-to-bag" });
  const inFlightCount = Number(
    fetcher.formData?.get("quantity") || 0
  );
  const optimisticCount = count + inFlightCount;
  return (
    <>
      <BagIcon />
      <span>{optimisticCount}</span>
    </>
  );
}

成分

fetcher.Form

就像 <Form> 一样，只是它不会引起导航。

function SomeComponent() {
  const fetcher = useFetcher();
  return (
    <fetcher.Form method="post" action="/some/route">
      <input type="text" />
    </fetcher.Form>
  );
}

方法

fetcher.submit(formData, options)

将表单数据提交到路由。虽然多个嵌套路由可以匹配一个 URL，但只会调用叶路由。

formData 可以是多种类型：

  • FormData - 一个 FormData 实例。
  • HTMLFormElement - 一个 <form> DOM 元素。
  • Object - 一个键 / 值对对象，默认情况下将转换为 FormData 实例。您可以传递更复杂的对象并通过指定 encType: "application/json" 将其序列化为 JSON。有关更多详细信息，请参阅 useSubmit。

如果方法是 GET，则会调用路由 loader，并将 formData 序列化为 URLSearchParams。如果方法是 DELETE、PATCH、POST 或 PUT，则会调用路由 action，并将 formData 作为主体。

// Submit a FormData instance (GET request)
const formData = new FormData();
fetcher.submit(formData);


// Submit the HTML form element
fetcher.submit(event.currentTarget.form, {
  method: "POST",
});


// Submit key/value JSON as a FormData instance
fetcher.submit(
  { serialized: "values" },
  { method: "POST" }
);


// Submit raw JSON
fetcher.submit(
  {
    deeply: {
      nested: {
        json: "values",
      },
    },
  },
  {
    method: "POST",
    encType: "application/json",
  }
);

fetcher.submit 是针对 fetcher 实例的 useSubmit 调用的包装器，因此它也接受与 useSubmit 相同的选项。

fetcher.load(href, options)

从路由加载器加载数据。虽然多个嵌套路由可以匹配一个 URL，但只会调用叶路由。

fetcher.load("/some/route");
fetcher.load("/some/route?foo=bar");

fetcher.load 在操作提交和通过 useRevalidator 发出显式重新验证请求后默认重新验证。由于 fetcher.load 加载特定 URL，因此它们不会在路由参数或 URL 搜索参数发生变化时重新验证。您可以使用 shouldRevalidate 来优化应重新加载哪些数据。

options.flushSync

flushSync 选项告诉 React Router DOM 将此 fetcher.load 的初始状态更新包装在 ReactDOM.flushSync 调用中，而不是默认的 React.startTransition。这允许您在更新刷新到 DOM 后立即执行同步 DOM 操作。

ReactDOM.flushSync 会降低 React 的优化效果，并可能损害应用的性能。

特性

fetcher.state

你可以通过 fetcher.state 了解 fetcher 的状态。它将是以下之一：

  • idle - 未获取任何内容。
  • submitting - 已提交表单。如果方法是 GET，则正在调用路由 loader。如果方法是 DELETE、PATCH、POST 或 PUT，则正在调用路由 action。
  • loading - 提交 action 后，正在重新加载路由的加载器。

fetcher.data

您的操作或加载器返回的响应数据存储在此处。一旦设置了数据，即使重新加载和重新提交（例如在已经读取数据后再次调用 fetcher.load()），它仍会保留在提取器上。

fetcher.formData

提交给服务器的 FormData 实例存储在这里。这对于乐观的 UI 很有用。

fetcher.formAction

提交的 URL。

fetcher.formMethod

提交的表单方法。

其他资源

讨论

视频