如何防止react-hook-form在组件重渲染时清空表单值

你的问题根源是布局切换时，MainLayoutMobile和MainLayoutDesktop作为独立组件被条件渲染，导致其中一个卸载，进而让Outlet内的页面组件（含表单）完全重新挂载，丢失react-hook-form的状态。不用逐个持久化表单的话，最直接高效的方案是重构布局，让页面组件（包括表单）始终处于同一个渲染树中，避免卸载：

推荐方案：重构布局，共享核心渲染树 #

把两个布局的核心内容（包含Outlet）提取为共享部分，只对差异元素（如Header、侧边栏容器）做条件渲染，确保Outlet及内部页面组件不会被卸载：

const MainLayout = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));

  // 条件渲染Header，区分移动端和桌面端样式
  const header = isMobile ? (
    <Box sx={{ position: 'fixed', top: 0, left: 0, width: '100%', zIndex: theme.zIndex.appBar }}>
      <AppHeaderMobile />
    </Box>
  ) : (
    <AppHeader />
  );

  // 核心内容区域，包含Outlet，样式根据设备调整
  const coreContent = (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        minWidth: '0px',
        flexGrow: 1,
        justifyContent: 'center',
        // 移动端给顶部留出Header的空间
        ...(isMobile ? { marginTop: theme.spacing(7.5) } : {}),
      }}
    >
      {header}
      <Paper
        component='main'
        elevation={3}
        sx={{
          m: isMobile ? theme.spacing(0, 1.5, 4, 1.5) : theme.spacing(0, 3, 6, 3),
          borderRadius: '20px',
        }}
      >
        {/* 核心：Outlet始终存在，不会被卸载 */}
        <Outlet />
      </Paper>
    </Box>
  );

  // 桌面端用MiniDrawer包裹核心内容，移动端直接渲染
  return isMobile ? coreContent : <MiniDrawer>{coreContent}</MiniDrawer>;
};

方案优势 #

• 完全避免页面组件卸载，react-hook-form的表单状态会自动保留，无需任何持久化逻辑
• 代码结构更简洁，差异部分集中处理，维护成本低
• 无额外性能开销，仅调整必要的DOM元素和样式

备选方案：CSS控制显隐，避免组件卸载 #

如果不想重构布局，也可以同时渲染两个布局组件，通过CSS的display属性控制显隐，确保页面组件始终存在于DOM树中：

const MainLayout = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));

  return (
    <>
      <div style={{ display: isMobile ? 'none' : 'block' }}>
        <MainLayoutDesktop />
      </div>
      <div style={{ display: isMobile ? 'block' : 'none' }}>
        <MainLayoutMobile />
      </div>
    </>
  );
};

注意事项 #

• 会同时渲染两套页面组件，存在轻微性能开销，适合布局差异极大、重构成本高的场景
• 需确保两个布局的Outlet不会产生冲突（如重复的DOM ID）

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