React多步骤表单中react-hook-form丢失Select组件值问题求助

问题出在你用本地useState维护Select的值，切换步骤时组件卸载，状态重置为初始值''，导致返回该步骤时丢失之前的选择。直接用React Hook Form的表单状态来管理值即可解决，不需要本地状态。

步骤1：修改子组件（Second_step_component） #

移除本地useState和自定义的handleChange，改用React Hook Form的watch方法获取字段值，同时依赖register自动处理值的同步：

const Second_step_component = ({ register, errors, watch }) => {
    // 从表单全局状态中获取Age字段的值，默认空字符串
    const age = watch("Age", "");

    return (
        <FormControl sx={{ m: 1, minWidth: 120 }} error={Boolean(errors.Age)}>
            <InputLabel id="demo-simple-select-helper-label">Age</InputLabel>
            
            <Select
                labelId="demo-simple-select-helper-label"
                id="demo-simple-select-helper"
                value={age}
                label="Age"
                // register已内置onChange逻辑，无需手动处理
                {...register("Age", {required: "Age Is Required"})}
            >
                <MenuItem value={10}>Ten</MenuItem>
                <MenuItem value={20}>Twenty</MenuItem>
                <MenuItem value={30}>Thirty</MenuItem>
            </Select>
            <FormHelperText>{errors.Age?.message}</FormHelperText>
        </FormControl>
    );
}
export default Second_step_component

步骤2：更新主组件（HorizontalLinearStepper） #

从useForm中解构出watch方法，并传递给子组件：

export default function HorizontalLinearStepper() {
  const [activeStep, setActiveStep] = React.useState(0);
  const [skipped, setSkipped] = React.useState(new Set());
  // 新增watch解构
  const {register, handleSubmit, formState: {errors}, trigger, watch} = useForm()
  const [state, setstate] = useState([{}]);

  // ... 其他原有代码不变

  // 传递watch给Second_step_component
  switch (activeStep) {
    case 0:
      Swithing = <First_step_component register={register} errors={errors}/>
      break
    case 1:
      Swithing = <Second_step_component register={register} errors={errors} watch={watch}/>
      break
  }

  // ... 其他原有代码不变
}

原理说明 #

• React Hook Form的表单状态是全局维护的，不会随组件卸载而丢失，切换步骤时字段值会被保留。
• watch方法会订阅指定字段的变化，自动更新组件中的值，保证Select的value与表单状态同步。
• register方法已经内置了onChange处理逻辑，会自动将Select的选择同步到表单状态，无需手动编写handleChange更新本地状态。

可选优化：设置全局默认值 #

如果需要给Age字段设置初始默认值，可以在初始化useForm时配置：

const {register, handleSubmit, formState: {errors}, trigger, watch} = useForm({
  defaultValues: {
    Age: '' // 这里可以设置默认选中值，比如10
  }
})

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