如何在React-hook-form中追踪特定输入字段数组变化并在onChange时提交

核心问题分析 #

1. watch()默认监听所有表单字段，导致无关字段的输入也会触发回调和后续API调用
2. 防抖逻辑中的timer作用域错误，每次回调都会重新声明变量，导致无法清除之前的定时器，可能出现多次API调用
3. unregister()不适用当前场景——它是移除字段而非停止监听，所以无效

解决方案代码 #

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

// 组件内部逻辑
const { watch, setValue, handleSubmit } = useForm();
const timerRef = useRef(null); // 用useRef持久化定时器实例

useEffect(() => {
  // 仅监听需要触发API的字段，替换为你的目标字段数组
  const subscription = watch(['includePA'], (data, { name, value }) => {
    // 处理includePA字段的联动逻辑
    if (name === 'includePA') {
      setChecked(value);
      setValue('premiumPA', value ? 10000000 : 0);
    }

    // 清除之前的定时器，避免重复触发API
    if (timerRef.current) {
      clearTimeout(timerRef.current);
    }

    // 设置防抖定时器，延迟500ms执行API调用
    timerRef.current = setTimeout(() => {
      handleSubmit(onSubmitHandler)();
    }, 500);
  });

  // 组件卸载时清理订阅和定时器，避免内存泄漏
  return () => {
    subscription.unsubscribe();
    if (timerRef.current) {
      clearTimeout(timerRef.current);
    }
  };
}, [handleSubmit, watch, setValue]);

关键优化点 #

• 精准监听字段：给watch()传入需要触发API的字段数组，只有这些字段变化时才会进入回调，彻底避免无关输入触发API
• 修复防抖逻辑：用useRef存储定时器实例，确保每次回调都能访问到同一个定时器，正确清除之前的延迟任务，防止重复调用API
• 简化字段处理：直接使用watch回调提供的value参数，无需额外调用getValues，提升性能
• 资源清理：组件卸载时同时取消watch订阅和清除定时器，避免内存泄漏

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