React Hook Form动态生成唯一register输入框，取值失败求助

问题原因 #

你直接用data.trip_start_date + counter得到undefined+序号，是因为.语法只能访问固定名称的属性，data.trip_start_date本身不存在，所以返回undefined，再拼接字符串就变成了undefinedxxx。而data.trip_start_date0是直接访问了名为trip_start_date0的属性，所以能拿到值。

正确取值方式 #

用对象的方括号属性访问语法，把拼接后的属性名作为字符串传入方括号：

const tripStartDate = data[`trip_start_date${counter}`];

这才是获取动态命名属性的正确写法，和你直接写data.trip_start_date0的效果完全一致。

更优方案：使用React Hook Form的数组字段（推荐） #

React Hook Form本身支持数组字段的原生处理，比手动拼接属性名更优雅，也更符合官方规范：

• 初始化表单时定义数组字段：

const { register, handleSubmit, control } = useForm({
  defaultValues: {
    trips: [{ trip_start_date: '' }] // 初始化一个空行程项
  }
});

• 使用useFieldArray动态管理数组输入框：

import { useFieldArray } from "react-hook-form";

const { fields, append, remove } = useFieldArray({
  control,
  name: "trips" // 和defaultValues中的数组字段名对应
});

• 渲染动态输入框：

{fields.map((item, index) => (
  <div key={item.id}>
    <input
      {...register(`trips[${index}].trip_start_date`)}
      type="date"
      placeholder="出发日期"
    />
    <button onClick={() => remove(index)}>删除</button>
  </div>
))}
<button onClick={() => append({ trip_start_date: '' })}>添加行程</button>

• 提交时直接获取数组数据：

const registerTrip = (data) => {
  // data.trips就是所有行程的数组，每个元素包含trip_start_date字段
  console.log(data.trips);
  // 后续业务逻辑处理...
};

这种方式不需要手动管理计数器和属性名拼接，React Hook Form会自动处理字段唯一性与数据收集，代码更简洁且不易出错。

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