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 实例。你可以传递一个更复杂的对象，并通过指定 encType: "application/json" 将其序列化为 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 是对 fetcher 实例的 useSubmit 调用的包装，因此它也接受与 useSubmit 相同的选项。
fetcher.load(href, options)从路由加载器加载数据。尽管多个嵌套路由可以匹配 URL，但只会调用叶子路由。
fetcher.load("/some/route");
fetcher.load("/some/route?foo=bar");
fetcher.load 默认在提交 action 和通过 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.load()）它也会在 fetcher 上持久存在。
fetcher.formData提交到服务器的 FormData 实例存储在此处。这对于乐观 UI 很有用。
fetcher.formAction提交的 URL。
fetcher.formMethod提交的表单方法。
讨论
视频
