使用react-hook-form与react-swipeable-views时表单状态重置求助

问题核心原因是：react-swipeable-views默认会卸载当前不可见的子视图组件，导致每个视图内的表单字段重新初始化，丢失已输入的状态。以下是几种可行的解决办法：

• 启用keepMounted属性
  给SwipeableViews组件添加keepMounted={true}配置，强制所有视图组件保持挂载状态，切换时不会被卸载，表单状态自然得以保留。示例代码：

  <SwipeableViews keepMounted={true}>
    {/* 你的各个表单视图组件 */}
  </SwipeableViews>
  

• 将表单状态提升至父组件
  把useForm的初始化逻辑移到包含SwipeableViews的父组件中，再将register、setValue等方法传递给子视图组件。这样即使子视图被卸载，表单状态始终保存在父组件，切换回来时能直接复用。示例：
  父组件代码片段：

  const { register, handleSubmit, setValue } = useForm({
    defaultValues: {
      // 表单初始值配置
    }
  });
  
  return (
    <SwipeableViews>
      <FirstStep register={register} />
      <SecondStep register={register} />
    </SwipeableViews>
  );
  

• 手动恢复字段状态（备选方案）
  若必须卸载子组件，可在子视图挂载时，通过watch获取当前表单的全局值，再用setValue将值回显到对应字段。不过这种方式需要额外处理，优先级低于前两种方案。

在你提供的示例项目中，只需给SwipeableViews添加keepMounted={true}，就能解决切换视图时表单重置的问题。

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