React问题：react-day-picker更新react-hook-form不触发组件重渲染

核心问题在于：react-hook-form依赖引用变化触发状态更新，如果传递给field.onChange的是原数组的引用（比如直接修改原数组后传递），它检测不到变化，自然不会更新表单值和触发重渲染。

具体解决步骤 #

1. 传递新数组实例给field.onChange #

react-day-picker多选模式下onSelect会返回当前选中的日期数组，但必须确保每次传递给field.onChange的是新数组引用，不能复用原数组：

<Calendar
  mode="multiple"
  selected={field.value}
  onSelect={(selectedDates) => {
    // 强制创建新数组，哪怕内容和原数组一致
    const newDates = selectedDates ? [...selectedDates] : [];
    field.onChange(newDates);
    console.log("change", newDates);
  }}
/>

2. 校验Zod Schema与表单默认值 #

确保Zod schema正确定义为日期数组，且表单默认值设为空数组（而非undefined）：

// Zod Schema
const formSchema = z.object({
  selectedDates: z.array(z.date()).default([]),
});

// 表单初始化
const { register, control, handleSubmit } = useForm({
  resolver: zodResolver(formSchema),
  defaultValues: {
    selectedDates: [],
  },
});

3. 禁止直接修改field.value #

绝对不能直接操作field.value（比如field.value.push(newDate)），这会修改react-hook-form内部状态的引用，导致无法追踪变化。所有更新必须通过field.onChange传递新数组完成。

验证效果 #

修改后，每次选择新日期时都会传递新数组引用，react-hook-form会检测到变化，更新form.getValues()结果并触发组件重渲染。

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