React Hook Form如何监听数组字段？Final-Form迁移装饰器实现疑问

要在React Hook Form中实现Final-Form里decorators的字段转换功能，核心思路是通过监听匹配正则的动态字段变化，再触发目标字段的更新操作。以下是针对你提到的动态数组字段场景的具体实现方案：

方案一：精准监听匹配正则的字段（推荐） #

利用useWatch的函数式匹配特性，只监听符合正则规则的字段，性能更优：

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

function MyDynamicForm() {
  const { register, control, setValue } = useForm({
    defaultValues: {
      array: [{ anotherArray: [{ field: '', transformedField: '' }] }]
    }
  });

  // 监听所有匹配正则的字段：array[索引].anotherArray[索引].field
  const watchedFields = useWatch({
    control,
    name: (fieldName) => /array\[\d+\]\.anotherArray\[\d+\]\.field/.test(fieldName)
  });

  useEffect(() => {
    // 遍历所有触发变化的匹配字段
    Object.entries(watchedFields).forEach(([fieldPath, currentValue]) => {
      // 提取数组索引
      const matchResult = fieldPath.match(/array\[(\d+)\]\.anotherArray\[(\d+)\]\.field/);
      if (matchResult) {
        const [, arrayIndex, subArrayIndex] = matchResult;
        
        // 执行自定义转换逻辑（示例：转为大写）
        const transformedValue = currentValue?.toUpperCase() || '';
        
        // 更新对应的目标字段
        setValue(
          `array[${arrayIndex}].anotherArray[${subArrayIndex}].transformedField`,
          transformedValue,
          {
            shouldDirty: true, // 标记字段为已修改
            shouldValidate: false // 根据需求决定是否触发验证
          }
        );
      }
    });
  }, [watchedFields, setValue]);

  // 动态数组渲染示例（结合useFieldArray可实现增删功能）
  return (
    <form>
      {/* 此处省略动态数组的渲染逻辑，需用register注册每个field字段 */}
    </form>
  );
}

方案二：监听整个表单变化（通用场景） #

如果需要监听所有字段变化并筛选匹配项，可以使用watch('*')监听全表单值：

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

function MyForm() {
  const { register, setValue } = useForm();
  const allFormValues = watch('*');

  useEffect(() => {
    const targetRegex = /array\[\d+\]\.anotherArray\[\d+\]\.field/;
    const changedFields = Object.keys(allFormValues);

    changedFields.forEach(fieldPath => {
      if (targetRegex.test(fieldPath)) {
        const matchResult = fieldPath.match(/array\[(\d+)\]\.anotherArray\[(\d+)\]\.field/);
        if (matchResult) {
          const [, i, j] = matchResult;
          const transformedValue = allFormValues[fieldPath]?.trim() || ''; // 自定义转换
          setValue(`array[${i}].anotherArray[${j}].targetField`, transformedValue);
        }
      }
    });
  }, [allFormValues, setValue]);

  return <form>{/* 表单内容 */}</form>;
}

关键注意点 #

1. 动态数组处理：如果需要动态增删数组元素，建议搭配useFieldArray组件，它会自动跟踪数组的结构变化，确保监听逻辑始终生效。
2. 性能优化：优先使用useWatch的函数式匹配，避免监听全表单带来的不必要渲染。
3. setValue选项：通过shouldDirty和shouldValidate参数，可以对齐Final-Form decorators的行为，控制是否标记字段为脏值或触发验证。

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