MUI Stepper表单异常：Guardian Relation字段误获取Barangay值

可能的原因及对应解决方法 #

1. 数据来源被意外篡改 #

检查代码中是否存在将scholarProfiles.barangay_name的值误赋值给scholarFamMembers.relation_to_scholar的逻辑，比如表单提交、数据同步、状态更新的代码片段。确认两个数据源的独立性，避免交叉赋值。

2. React Hook Form Controller状态残留 #

分步表单切换时，Controller组件可能因为React的DOM复用机制，没有重新初始化状态。给两个Controller组件添加绑定到当前步骤的key属性，强制组件在步骤切换时重新渲染：

Barangay字段修改：

<Controller
  key={`step-${currentStep}-barangay_name`}
  name="barangay_name"
  control={control}
  defaultValue={scholarProfiles.barangay_name || ''}
  // 保留原有的rules、render等属性
/>

Guardian Relation字段修改：

<Controller
  key={`step-${currentStep}-relation_to_scholar`}
  name='relation_to_scholar'
  control={control}
  defaultValue={scholarFamMembers.relation_to_scholar || ""}
  // 保留原有的rules、render等属性
/>

3. Native Select组件DOM复用导致值残留 #

MUI的native Select可能因为DOM节点被复用，导致之前的选中值残留。给Select组件添加唯一key：

Barangay的Select修改：

<MUI.Select
  id="barangay_name"
  native
  key={`barangay-select-${currentStep}`}
  {...field}
>

Guardian Relation的Select修改：

<MUI.Select
  id="relation_to_scholar"
  native
  key={`relation-select-${currentStep}`}
  {...field}
>

4. React Hook Form全局defaultValues冲突 #

检查表单初始化时的useForm配置代码，确认barangay_name和relation_to_scholar没有被设置为相同的初始值，或者其中一个字段的defaultValue被错误关联到另一个字段的数据源。

若以上方法未解决问题，可提供以下信息进一步排查：

• 表单初始化的useForm配置代码
• 步骤切换的逻辑实现
• scholarProfiles和scholarFamMembers的数据来源及更新逻辑

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