`useFetcher`

一個用於在導航之外與伺服器互動的 Hook。

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

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

選項

`key`

預設情況下，useFetcher 會產生一個以該元件為範圍的獨特 fetcher（但是，它可以在執行時於 useFetchers() 中被查找）。如果您想使用自己的 key 來識別 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");

在 action 提交和透過 useRevalidator 明確重新驗證請求之後，fetcher.load 預設會重新驗證。由於 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 提交後，正在重新載入路由的 loader。

`fetcher.data`

您的 action 或 loader 返回的回應資料會儲存在這裡。一旦資料設定完成，它就會持續保留在 fetcher 上，即使經過重新載入和重新提交（例如在已經讀取資料後再次呼叫 fetcher.load()）。

`fetcher.formData`

提交到伺服器的 FormData 實例會儲存在這裡。這對於樂觀 UI 很有用。

`fetcher.formAction`

提交的 URL。

`fetcher.formMethod`

提交的表單方法。

其他資源

討論

影片