</> `useWatch:` `({ control?: Control, name?: string, defaultValue?: unknown, disabled?: boolean }) => object`

行为类似于 watch API，但是，这将隔离自定义挂钩级别的重新渲染，并可能为您的应用程序带来更好的性能。

Props

名称	类型	描述
`name`	string \| string[] \| undefined	字段的名称。
`control`	对象	`control` 对象由 `useForm` 提供。如果您使用 `FormProvider`，则它是可选的。
`defaultValue`	未知	`useWatch` 在初始渲染之前返回的默认值。注意：首次渲染始终返回 `defaultValue`（如果提供）。
`disabled`	boolean = false	禁用订阅的选项。
`exact`	boolean = false	此道具将启用对输入名称订阅的精确匹配。

返回值

示例	返回值
`useWatch({ name: 'inputName' })`	未知
`useWatch({ name: ['inputName1'] })`	unknown[]
`useWatch()`	`{[key:string]: unknown}`

规则

useWatch 的初始返回值始终返回 defaultValue 或 useForm 中的 defaultValues 内的内容。
useWatch 和 watch 之间的唯一区别在于根（useForm）级别或自定义挂钩级别更新。

useWatch 的执行顺序很重要，这意味着如果您在订阅就位之前更新表单值，则更新的值将被忽略。

setValue("test", "data")
useWatch({ name: "test" }) // ❌ subscription is happened after value update, no update received
useWatch({ name: "example" }) // ✅ input value update will be received and trigger re-render
setValue("example", "data")

您可以使用以下简单的自定义挂钩克服上述问题

const useFormValues = () => {
  const { getValues } = useFormContext()

  return {
    ...useWatch(), // subscribe to form value updates

    ...getValues(), // always merge with latest form values
  }
}

useWatch 的结果针对渲染阶段而不是 useEffect 的依赖项进行了优化，要检测值更新，您可能需要使用外部自定义挂钩进行值比较。

示例

表单

CodeSandbox ^TS

import React from "react"
import { useForm, useWatch } from "react-hook-form"

interface FormInputs {
  firstName: string
  lastName: string
}

function FirstNameWatched({ control }: { control: Control<FormInputs> }) {
  const firstName = useWatch({
    control,
    name: "firstName", // without supply name will watch the entire form, or ['firstName', 'lastName'] to watch both
    defaultValue: "default", // default value before the render
  })

  return <p>Watch: {firstName}</p> // only re-render at the custom hook level, when firstName changes
}

function App() {
  const { register, control, handleSubmit } = useForm<FormInputs>()

  const onSubmit = (data: FormInputs) => {
    console.log(data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>First Name:</label>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <input type="submit" />

      <FirstNameWatched control={control} />
    </form>
  )
}

高级字段数组

CodeSandbox ^JS

import React from "react"
import { useWatch } from "react-hook-form"

function totalCal(results) {
  let totalValue = 0

  for (const key in results) {
    for (const value in results[key]) {
      if (typeof results[key][value] === "string") {
        const output = parseInt(results[key][value], 10)
        totalValue = totalValue + (Number.isNaN(output) ? 0 : output)
      } else {
        totalValue = totalValue + totalCal(results[key][value], totalValue)
      }
    }
  }

  return totalValue
}

export const Calc = ({ control, setValue }) => {
  const results = useWatch({ control, name: "test" })
  const output = totalCal(results)

  // isolated re-render to calc the result with Field Array
  console.log(results)

  setValue("total", output)

  return <p>{output}</p>
}

感谢您的支持

如果您发现 React Hook Form 对您的项目有用，请考虑为它加星并支持它。

useWatch

</> useWatch: ({ control?: Control, name?: string, defaultValue?: unknown, disabled?: boolean }) => object

Props

返回值

感谢您的支持

</> `useWatch:` `({ control?: Control, name?: string, defaultValue?: unknown, disabled?: boolean }) => object`