类型别名 FetcherWithComponents<TData>

类型声明

• Form: React.ForwardRefExoticComponent<FetcherFormProps & React.RefAttributes<HTMLFormElement>>

  类似于 Form，但它不会引起导航。

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

• load: ((href: string, opts?: {
      flushSync?: boolean;
  }) => Promise<void>)

  从路由加载数据。在用户事件中命令式地加载数据非常有用，例如在普通按钮或表单之外，像一个组合框或搜索输入框。

  let fetcher = useFetcher()
  
  <input onChange={e => {
    fetcher.load(`/search?q=${e.target.value}`)
  }} />
  Copy

  • • (href, opts?): Promise<void>

    • 参数

      • href: string
      • Optionalopts: {
            flushSync?: boolean;
        }

        • OptionalflushSync?: boolean

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

      返回 Promise<void>

• submit: FetcherSubmitFunction

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

  formData 可以是多种类型

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

  如果方法是 GET，则路由 [loader][loader] 将被调用，并且 formData 将被序列化到 URL 中作为 [URLSearchParams][url_search_params]。 如果是 DELETE、PATCH、POST 或 PUT，则路由 [action][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",
    }
  );
  Copy