react-hook-form中Controller的onChange无法更新formFieldArray的日期字段

核心错误点 #

• 表单类型定义不匹配：FormProps 中订阅数组字段名应为 subscriptions ，与 useFieldArray 绑定的name属性保持一致，原代码写为单数subscription
• 数组子项字段绑定错误：遍历fieldArray渲染单条订阅配置时，Controller的name需要拼接当前项索引，否则所有日期选择器都会绑定到根表单的startDate字段，无法和单条订阅数据关联
• 日期选择器双向绑定缺失：编辑状态下应使用Controller注入的field.value作为selected属性值，而非直接取f.startDate，才能实现数据更新的同步
• 下拉选项展示属性错误：Package 类型仅包含label和value属性，原代码调用了不存在的f.package.name字段
• 冗余状态可以删除：声明的selectedDate状态没有被使用，直接移除即可

修复后核心代码 #

Form.tsx #

// 修正FormProps类型定义
type FormProps = {
  subscriptions: Subscription[] // 字段名与useFieldArray的name保持一致
  seatAmount: string
  seatCount: string
  threePs: string | null
  adminDashboard: string | null
  teamSearch: string | null
}

const CustomerSubscription = () => {
  const {
    control,
    reset,
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormProps>({
    // 初始化订阅数组默认值，避免运行时报错
    defaultValues: {
      subscriptions: []
    }
  })
  const { fields, append, remove } = useFieldArray({
    control,
    name: 'subscriptions',
  })
  const onSubmit = (data: FormProps) => {
    console.log(data)
  }

  return (
    <SubscriptionContainer>
      <form onSubmit={handleSubmit(onSubmit)}>
        <FormHeader reset={reset} title="Subscription Information" />

        <FormContent>
          <FormRow>
            <Label
              htmlFor="WhilContentSubscription"
              label="Whil Content Subscription:"
            />
            <AddSubscription onAdd={append} />
            <ContentSubscriptionWrapper>
              {fields.map((f: any, index: number) => (
                <div key={f.id}>
                  <button type="button" onClick={() => remove(index)}>
                    X
                  </button>
                  {/* 修正套餐名称展示属性 */}
                  <SubscriptionLink>{f.package.label}</SubscriptionLink>
                  <Controller
                    control={control}
                    {/* 绑定对应索引的startDate字段 */}
                    name={`subscriptions.${index}.startDate`}
                    render={({ field }) => (
                      <DatePicker
                        placeholderText="Select date"
                        onChange={(date: Date) => field.onChange(date)}
                        {/* 双向绑定Controller管理的字段值 */}
                        selected={field.value}
                      />
                    )}
                  />
                </div>
              ))}
            </ContentSubscriptionWrapper>
          </FormRow>
        </FormContent>
      </form>
    </SubscriptionContainer>
  )
}

export default CustomerSubscription

AddSubscription.tsx #

原有逻辑无需修改，新增订阅时提交的Subscription结构符合字段要求，可正常append到fieldArray中。如果需要支持编辑endDate字段，按照startDate的绑定规则新增对应Controller即可。

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