如何使用react-hook-form同时获取不同组件内两个表单的数据并输出指定结构数组

核心调整说明 #

• 调整 useForm 的 defaultValues 为数组结构，提前预设两个条目的 place 固定值
• 修正子组件 register 语法错误，移除子组件内冗余的嵌套 form 标签
• 提交时过滤未填写内容的空条目，匹配用户可选填0/1/2个表单的需求

调整后完整代码 #

父组件代码

import { useForm } from 'react-hook-form';
import GetName1 from './GetName1';
import GetName2 from './GetName2';

const ParentComponent = () => {
  const { register, handleSubmit } = useForm({
    mode: 'onChange',
    // 直接按最终要求的数组结构设置默认值，提前预设place字段
    defaultValues: [
      { name: '', surname: '', place: 'Place1' },
      { name: '', surname: '', place: 'Place2' }
    ]
  });

  const saveAdress = (data) => {
    // 过滤掉name或surname未填写的空条目
    const result = data.filter(item => item.name.trim() && item.surname.trim());
    console.log(result); // 输出即为符合要求的对象数组
    // 后续可直接将result用于提交存储等逻辑
  };

  return (
    <form onSubmit={handleSubmit(saveAdress)}>
      <div>
        <GetName1 register={register} />
        <GetName2 register={register} />
      </div>
      <button type="submit">Save</button>
    </form>
  );
};

子组件代码

// GetName1 组件（React组件首字母需大写，避免渲染异常）
const GetName1 = ({ register }) => {
  return (
    <div>
      <input placeholder="name" {...register('[0].name')} />
      <input placeholder="surname" {...register('[0].surname')} />
    </div>
  );
};

// GetName2 组件
const GetName2 = ({ register }) => {
  return (
    <div>
      <input placeholder="name" {...register('[1].name')} />
      <input placeholder="surname" {...register('[1].surname')} />
    </div>
  );
};

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