useFetcher用于在导航之外与服务器交互的钩子。
import { useFetcher } from "@remix-run/react";
export function SomeComponent() {
const fetcher = useFetcher();
// ...
}
key默认情况下，useFetcher 会生成一个作用域为该组件的唯一 fetcher（但是，它可以在 useFetchers() 中查找，同时处于飞行状态）。如果您想使用自己的键标识 fetcher 以便您可以在应用程序的其他地方访问它，您可以在 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 实例。您可以传递更复杂的对象并将其序列化为 JSON，方法是指定 encType: "application/json"。有关更多详细信息，请参见 useSubmit。如果方法为GET，则会调用路由loader，并将formData序列化为URL，格式为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是围绕useSubmit对fetcher实例进行封装，因此它也接受与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.flushSyncflushSync选项告诉React Router DOM将此fetcher.load的初始状态更新包装在一个ReactDOM.flushSync调用中，而不是默认的React.startTransition。这使您可以在更新刷新到DOM后立即执行同步DOM操作。
ReactDOM.flushSync会降低React性能，并可能影响应用程序的性能。
fetcher.state您可以使用fetcher.state了解fetcher的状态。它将是以下之一
GET，则会调用路由loader。如果为DELETE，PATCH，POST或PUT，则会调用路由action。action提交后正在重新加载路由的加载器。fetcher.data从您的action或loader返回的响应数据存储在这里。一旦数据被设置，它就会持续存在于fetcher上，即使在重新加载和重新提交（例如，在已经读取数据之后再次调用fetcher.load()）时也是如此。
fetcher.formData提交到服务器的FormData实例存储在这里。这对于乐观UI很有用。
fetcher.formAction提交的URL。
fetcher.formMethod提交的表单方法。
讨论
视频
