React中react-hook-form联动表单输入值的处理问题求助

你的两种实现方法都存在问题，下面给出两种可行的解决方案：

方案1：在due_date的Controller onChange中直接更新duration #

这种方式更直接，无需额外的useWatch和useEffect，能避免重渲染循环与延迟问题：

import { differenceInDays, addDays } from 'date-fns';
import { setValue } from 'react-hook-form';

<Controller
  name="due_date"
  control={control}
  render={({ field }) => (
    <DatePicker
      {...field}
      sx={{ width: '100%' }}
      slotProps={{
        textField: { size: 'small' },
      }}
      onChange={(newDate) => {
        // 先同步due_date到表单状态
        field.onChange(newDate);
        // 计算天数差并更新duration字段
        if (newDate && props.operationDate) {
          const daysDiff = differenceInDays(newDate, props.operationDate);
          setValue('duration', daysDiff, { shouldDirty: true });
        }
      }}
    />
  )}
/>

同时处理duration修改时更新due_date的逻辑：

const duration = useWatch({ control, name: 'duration' });

useEffect(() => {
  if (duration && props.operationDate) {
    const newDueDate = addDays(props.operationDate, Number(duration));
    setValue('due_date', newDueDate, { shouldDirty: true });
  }
}, [duration, props.operationDate, setValue]);

注意事项：

• 确保differenceInDays参数顺序正确：differenceInDays(结束日期, 开始日期)，顺序颠倒会得到负数。
• { shouldDirty: true }用于标记表单字段为已修改状态，符合用户操作预期。

方案2：修复useEffect+useWatch的实现 #

如果坚持使用useEffect，需处理初始值与避免循环更新：

const dueDate = useWatch({ control, name: 'due_date' });
const [prevDueDate, setPrevDueDate] = useState(dueDate);

useEffect(() => {
  // 过滤初始渲染与重复值，避免循环更新
  if (dueDate && dueDate !== prevDueDate && props.operationDate) {
    const daysDiff = differenceInDays(dueDate, props.operationDate);
    setValue('duration', daysDiff, { shouldDirty: true });
    setPrevDueDate(dueDate);
  }
}, [dueDate, props.operationDate, setValue, prevDueDate]);

你原方法1出现「第一次不更新、后续值错误」，大概率是differenceInDays参数顺序颠倒，或是未处理初始值逻辑；方法2直接调用更新会导致每次渲染都触发状态变更，进而引发无限重渲染循环。

你遇到的useWatch无法获取最新值的问题，核心原因是MUI DatePicker的onChange与React Hook Form（RHF）Controller的field.onChange存在参数或触发逻辑不兼容：

1. 参数格式差异：
   当你展开{...field}时，虽然已将RHF的field.onChange传给DatePicker，但MUI DatePicker在部分配置下，传递的参数可能不是RHF期望的原始Date对象（比如格式化后的字符串），导致field.onChange无法正确同步值到RHF表单状态。

2. 显式调用的必要性：
   你添加的onChange={(v) => field.onChange(v)}会覆盖{...field}中的onChange，显式将DatePicker返回的Date对象传递给field.onChange，确保RHF能正确接收并更新表单状态，useWatch因此能实时拿到最新的due_date值。

3. 为什么有control={control}还需要这个？
   control={control}仅让Controller关联到RHF的表单控制实例，但字段值的同步依赖于field.onChange的正确触发。如果DatePicker没有正确调用field.onChange，即使配置了control，RHF也无法感知值的变化，useWatch自然拿不到最新值。

你也可以简化代码，避免参数覆盖的歧义：

<Controller
  name="due_date"
  control={control}
  render={({ field: { onChange, ...restField } }) => (
    <DatePicker
      {...restField}
      sx={{ width: '100%' }}
      slotProps={{ textField: { size: 'small' } }}
      onChange={(newDate) => onChange(newDate)}
    />
  )}
/>

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