使用react-hook-form的setValue函数遇阻，请求技术排查

核心问题分析 #

你的代码里主要有两个关键问题导致setValue失效：

• 字段路径不统一：register时用了responses.${QuestionId}格式的字段名，但useEffect里setValue只用了QuestionId字符串，两者路径不匹配，react-hook-form找不到对应的字段。
• DatePicker onChange参数类型错误：MUI DatePicker的onChange返回的是Dayjs对象（或null），不是String类型，直接传递会导致值类型不匹配，赋值失败。

具体修复步骤 #

1. 统一表单字段路径 #

在所有register和setValue调用中，使用一致的字段路径（比如responses.${QuestionId}）：

修正useEffect中的setValue：

useEffect(() => {
  if (Array.isArray(questions) && questions.length > 0) {
    questions.forEach((item) => {
      // 统一使用responses.QuestionId作为字段名
      setValue(`responses.${item.QuestionId}`, "parth");
    });
  }
}, [questions, setValue]);

修正DatePicker的register和setValue：

answerField = (
  <div className="answer-field" key={`answer-field-${index}`}>
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        className="date-picker"
        slotProps={{ textField: { placeholder: "Please select date" } }}
        format="MM/DD/YYYY"
        // 统一字段路径
        {...reg(`responses.${formdetail.QuestionId}`)}
        onChange={(date) => {
          // 将Dayjs对象转为指定格式的字符串
          const dateStr = date ? date.format("MM/DD/YYYY") : "";
          setV(`responses.${formdetail.QuestionId}`, dateStr);
        }}
      />
    </LocalizationProvider>
  </div>
);

2. 初始化表单默认值 #

在useForm初始化时，提前声明responses对象，确保嵌套字段能被正确识别：

const { register, setValue } = useForm({
  defaultValues: {
    responses: {}
  },
  // 关闭自动注销，避免动态生成的字段被清除
  shouldUnregister: false
});

3. 单选按钮的适配处理 #

对于单选按钮类型的字段，同样要保证register和setValue的字段路径一致，并且setValue的取值要和选项的value属性匹配：

// 假设单选按钮选项是从item.Options解析而来
const options = item.Options.split(',').map(opt => opt.trim());

// 单选按钮组的register和setValue
<div key={`radio-group-${item.QuestionId}`}>
  {options.map(opt => (
    <label key={opt}>
      <input
        type="radio"
        {...reg(`responses.${item.QuestionId}`)}
        value={opt}
      />
      {opt}
    </label>
  ))}
</div>

// 赋值时直接传入选项对应的值
setValue(`responses.${item.QuestionId}`, options[0]);

验证方法 #

可以通过watch函数监听字段变化，确认setValue是否生效：

const watchResponses = watch('responses');
console.log('当前表单值:', watchResponses);

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