React Hook Form嵌套数组中onChange时值无法更新问题

问题场景 #

我在使用React Hook Form处理嵌套数组结构的表单时，其他操作都能正常执行，但在onChange事件中无法更新selectedAnswer的状态，不过可以正确获取所有表单值。我的表单默认值结构如下：

const { register, handleSubmit, setValue, getValues } = useForm({
  defaultValues: {
    quizData: [{
      pId: 1,
      questions: [
        { que: 'QUESTION 1', options: ['option 1', 'option 2'], correctAnswer: 0, selectedAnswer: -1 },
        { que: 'QUESTION 2', options: ['option 1', 'option 2'], correctAnswer: 0, selectedAnswer: -1 }
      ]
    }]
  }
});

修复方案 #

1. 确保表单字段路径正确 #

嵌套数组中的字段需要使用完整的层级路径来关联表单状态，比如针对quizData下第1个元素的第n个问题，selectedAnswer的路径应为quizData[0].questions[${qIdx}].selectedAnswer（qIdx为问题的索引）。

2. 正确绑定表单控件 #

如果使用单选框这类原生控件，直接通过register绑定完整路径即可自动同步状态：

{quizData[0].questions.map((q, qIdx) => (
  <div key={qIdx}>
    <p>{q.que}</p>
    {q.options.map((opt, optIdx) => (
      <label key={optIdx}>
        <input
          type="radio"
          {...register(`quizData[0].questions[${qIdx}].selectedAnswer`)}
          value={optIdx}
        />
        {opt}
      </label>
    ))}
  </div>
))}

3. 手动更新状态的正确姿势 #

如果需要自定义onChange逻辑，调用setValue时要确保路径正确，同时匹配值的类型（selectedAnswer是数字类型，需转换输入值）：

const handleOptionChange = (qIdx, value) => {
  setValue(
    `quizData[0].questions[${qIdx}].selectedAnswer`,
    parseInt(value),
    { shouldDirty: true } // 标记表单为已修改状态
  );
};

4. 验证状态同步 #

可以在提交回调中打印完整表单数据，确认selectedAnswer是否更新：

const onSubmit = (data) => {
  console.log(data.quizData[0].questions);
};

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