React Hook Form watch回调用法咨询及代码无响应问题排查

问题原因 #

你当前使用的React Hook Form版本不支持回调式watch的用法，回调式watch是v7版本才新增的特性。受限于版本只能使用旧版watch时，需要通过监听watch返回值的方式实现字段变化监听。

正确实现示例 #

监听单个字段 #

import { useEffect } from 'react';
import { useForm } from 'react-hook-form';

function MyForm() {
  const { watch, register } = useForm();
  // 监听单个指定字段
  const username = watch('username');

  useEffect(() => {
    console.log("username 字段更新：", username);
  }, [username]); // 仅当username变化时触发回调

  return (
    <form>
      <input {...register('username')} placeholder="输入用户名" />
    </form>
  );
}

监听多个指定字段 #

import { useEffect } from 'react';
import { useForm } from 'react-hook-form';

function MyForm() {
  const { watch, register } = useForm();
  // 监听多个指定字段，返回对应值的数组
  const [username, email] = watch(['username', 'email']);

  useEffect(() => {
    console.log("指定字段更新：", { username, email });
  }, [username, email]); // 依赖数组传入监听的字段值

  return (
    <form>
      <input {...register('username')} placeholder="用户名" />
      <input {...register('email')} placeholder="邮箱" />
    </form>
  );
}

监听所有字段（谨慎使用，可能影响性能） #

import { useEffect } from 'react';
import { useForm } from 'react-hook-form';

function MyForm() {
  const { watch, register } = useForm();
  // 不传参数时监听所有字段，返回完整表单值对象
  const allFormValues = watch();

  useEffect(() => {
    console.log("全表单值更新：", allFormValues);
  }, [allFormValues]);

  return (
    <form>
      <input {...register('username')} placeholder="用户名" />
      <input {...register('email')} placeholder="邮箱" />
      <input {...register('age')} type="number" placeholder="年龄" />
    </form>
  );
}

性能优化建议 #

• 优先精准监听需要的字段，避免监听全表单值，减少不必要的重渲染和回调触发
• 若需监听多个字段，尽量使用数组指定字段，而非监听整个表单对象

内容的提问来源于stack exchange，提问作者copenndthagen