函数 useFetcher

  • useFetcher<T>(__namedParameters?): FetcherWithComponents<SerializeFrom<T>>

  • 适用于创建复杂的、动态的用户界面，这些界面需要多个并发数据交互而不会导致导航。

    Fetcher 跟踪它们自己独立的状态，可用于加载数据、提交表单，以及通常与 loaders 和 actions 交互。

    import { useFetcher } from "react-router"

    function SomeComponent() {
      let fetcher = useFetcher()

      // states are available on the fetcher
      fetcher.state // "idle" | "loading" | "submitting"
      fetcher.data // the data returned from the action or loader

      // render a form
      <fetcher.Form method="post" />

      // load data
      fetcher.load("/some/route")

      // submit data
      fetcher.submit(someFormRef, { method: "post" })
      fetcher.submit(someData, {
        method: "post",
        encType: "application/json"
      })
    }

    类型参数

    • T = any

    参数

    • __namedParameters: {
          key?: string;
      } = {}
      • 可选key?: string

        默认情况下，useFetcher 生成一个唯一的 fetcher，其作用域限定于该组件。如果您想用自己的 key 标识一个 fetcher，以便您可以从应用程序的其他位置访问它，您可以使用 key 选项

        function SomeComp() {
          let fetcher = useFetcher({ key: "my-key" })
          // ...
        }

        // Somewhere else
        function AnotherComp() {
          // this will be the same fetcher, sharing the state across the app
          let fetcher = useFetcher({ key: "my-key" });
          // ...
        }

    返回 FetcherWithComponents<SerializeFrom<T>>

设置

成员可见性