react-use-form提交后重置无法恢复React State派生默认值问题

一、重置表单无法恢复到提交后默认值的解决方法 #

问题核心：reset()默认使用表单初始化时的defaultValues，提交后submittedData更新但未同步到重置逻辑中。只需在调用reset时传入最新的submittedData即可：

// 修改reset按钮的点击事件
<button type="button" onClick={() => reset(submittedData)}>
  Reset
</button>

点击重置后，表单会直接恢复到submittedData对应的状态，包括数组字段的长度和各字段值。

二、修改firstName时清空对应lastName的实现 #

之前使用resetField未生效，大概率是字段路径未正确指定。可以通过setValue直接清空对应lastName字段，同时保留register的默认事件处理：

// 在firstName的select组件中添加onChange逻辑
<select
  {...register(`contacts.${index}.firstName`)}
  onChange={(e) => {
    // 先触发register自带的onChange更新表单状态
    register(`contacts.${index}.firstName`).onChange(e);
    // 清空对应索引的lastName
    setValue(`contacts.${index}.lastName`, "");
  }}
>
  <option value="">Select</option>
  <option value="test1">test1</option>
  <option value="test2">test2</option>
</select>

若坚持使用resetField，需确保路径正确：

resetField(`contacts.${index}.lastName`);

三、新手优化建议 #

• 依赖React Hook Form API管理状态：尽量避免手动维护额外的表单state，用register、setValue、watch等API统一管理，减少状态不一致问题。
• 利用handleSubmit处理提交：提交逻辑用handleSubmit包裹，它会自动处理表单验证（若配置）并返回格式化后的表单数据：

  const onSubmit = handleSubmit((data) => {
    console.log(data);
    setSubmittedData(data);
  });
  

• 动态字段数组的路径规范：使用useFieldArray时，确保每个字段的name遵循数组名.索引.字段名的格式（如contacts.${index}.lastName），让表单库正确追踪每个字段状态。
• 初始化状态对齐：将submittedData的初始值设置为与表单defaultValues一致，避免初始状态下表单与提交状态脱节。
• 用watch做调试与联动：可以用watch()监听整个表单的变化，方便调试表单状态：

  const formData = watch();
  console.log("当前表单状态：", formData);
  

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