基于React Hook Form处理多步骤注册表单的最佳方案问询

我在React应用中实现了一个三步注册流程，使用React Hook Form处理表单逻辑。Auth组件会根据当前路由渲染对应的表单组件，核心代码如下：

import { AppRoute } from "@/enums/enums.js";
import { useAppDispatch, useCallback, useLocation } from "@/hooks/hooks.js";
import { type UserSignUpBasicRequestDto } from "#/users/users.js";
import { actions as authActions } from "~/slices/auth/auth.js";

import {
  AuthLayout,
  SignInForm,
  SignUpAdditionalInfoForm,
  SignUpBasicForm,
  SignUpInterestsForm
} from "./libs/components/components.js";

const Auth: React.FC = () => {
  const dispatch = useAppDispatch();
  const { pathname } = useLocation();

  const handleSignInSubmit = useCallback((): void => {}, []);

  const handleSignUpSubmit = useCallback((): void => {}, []);

  const getLayout = (path: string): React.ReactNode => {
    switch (path) {
      case AppRoute.SIGN_IN: {
        return <SignInForm onSubmit={handleSignInSubmit} />;
      }
      case AppRoute.SIGN_UP: {
        return <SignUpBasicForm onSubmit={handleSignUpSubmit} />;
      }
      case AppRoute.SIGN_UP_ADDITIONAL_INFO: {
        return <SignUpAdditionalInfoForm onSubmit={handleSignUpSubmit} />;
      }
      case AppRoute.SIGN_UP_INTERESTS: {
        return <SignUpInterestsForm onSubmit={handleSignUpSubmit} />;
      }
    }

    return null;
  };

  return (
    <>
      <AuthLayout>{getLayout(pathname)}</AuthLayout>
    </>
  );
};

export { Auth };

我希望把三步表单的所有数据统一保存到一个状态中，最后一次性提交到服务器。目前我想到了三个方案：

• 方案1：在Auth组件中使用单个useForm钩子，包含三个表单的全部字段，再把control、errors等属性传递给各个子表单组件，但这样可能降低子表单的灵活性。
• 方案2：每个表单组件单独调用useForm钩子，提交时把数据保存到localStorage，等三步完成后统一读取并提交到服务器，提交完成后清除localStorage中的数据。
• 方案3：把数据保存到URL哈希中，但我觉得这不是个好主意。

请问哪个方案最优？有没有更合适的处理方式？

方案分析与推荐 #

现有方案优劣分析 #

1. 方案1（全局useForm）

   • 优势：数据集中管理，无需额外持久化逻辑，React Hook Form的表单状态（如校验、脏值）能全局同步，最后提交时直接拿完整数据即可。
   • 劣势：子表单会依赖父组件传递的control等属性，耦合度较高，如果后续子表单需要单独复用，会受限于父组件的表单配置。另外，所有字段都在全局定义，字段较多时会增加Auth组件的复杂度。

2. 方案2（localStorage持久化）

   • 优势：子表单独立性强，每个表单可以单独维护自己的useForm配置，页面刷新后数据不会丢失，用户体验更好。
   • 劣势：需要手动处理localStorage的读写和清除逻辑，容易出现数据不一致的问题（比如用户中途关闭页面，localStorage的数据残留）；另外，敏感数据存在localStorage有安全风险（比如用户的手机号、邮箱等）。

3. 方案3（URL哈希存储）

   • 完全不推荐：URL哈希会暴露用户的注册数据，隐私性差；且URL长度有限，无法存储较多字段；同时刷新页面后数据虽然保留，但用户分享链接会泄露个人信息，风险极高。

更优的处理方式 #

结合你代码中已经使用Redux的情况，推荐用Redux全局状态管理注册数据，配合React Hook Form的局部校验：

• 每个子表单组件单独使用useForm处理自身的字段校验和输入逻辑，提交当前步骤时，把数据dispatch到Redux的auth切片中保存。
• 进入下一个步骤时，子表单可以从Redux中读取之前步骤的数据（如果需要回显）。
• 最后一步提交时，直接从Redux中取出所有注册数据，统一发送到服务器，完成后清空Redux中的注册状态。

示例思路：

1. 在auth切片中添加注册数据的状态：

// ~/slices/auth/auth.js
const initialState = {
  signUpData: {
    basic: null,
    additional: null,
    interests: null
  }
};

const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    setSignUpBasicData: (state, action) => {
      state.signUpData.basic = action.payload;
    },
    setSignUpAdditionalData: (state, action) => {
      state.signUpData.additional = action.payload;
    },
    setSignUpInterestsData: (state, action) => {
      state.signUpData.interests = action.payload;
    },
    clearSignUpData: (state) => {
      state.signUpData = initialState.signUpData;
    }
  }
});

export const actions = authSlice.actions;
export default authSlice.reducer;

2. 子表单组件中处理提交：

// SignUpBasicForm.jsx
import { useForm } from 'react-hook-form';
import { useAppDispatch } from '@/hooks/hooks.js';
import { actions as authActions } from '~/slices/auth/auth.js';
import { useNavigate } from 'react-router-dom';

const SignUpBasicForm = () => {
  const dispatch = useAppDispatch();
  const navigate = useNavigate();
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    dispatch(authActions.setSignUpBasicData(data));
    // 跳转到下一步路由
    navigate(AppRoute.SIGN_UP_ADDITIONAL_INFO);
  };

  return (
    // 表单JSX，使用register绑定字段
  );
};

3. 最后一步提交时统一获取数据：

// SignUpInterestsForm.jsx
import { useForm } from 'react-hook-form';
import { useAppDispatch, useAppSelector } from '@/hooks/hooks.js';
import { actions as authActions } from '~/slices/auth/auth.js';
import { useNavigate } from 'react-router-dom';
import { api } from '@/api/api.js';

const SignUpInterestsForm = () => {
  const dispatch = useAppDispatch();
  const navigate = useNavigate();
  const signUpData = useAppSelector(state => state.auth.signUpData);
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = async (interestsData) => {
    dispatch(authActions.setSignUpInterestsData(interestsData));
    // 合并所有数据
    const fullSignUpData = {
      ...signUpData.basic,
      ...signUpData.additional,
      ...interestsData
    };
    try {
      await api.users.signUp(fullSignUpData);
      // 提交成功后清空状态
      dispatch(authActions.clearSignUpData());
      // 跳转到首页或登录页
      navigate(AppRoute.HOME);
    } catch (err) {
      // 处理错误
    }
  };

  return (
    // 表单JSX
  );
};

这种方式兼顾了子表单的独立性（每个表单自己处理校验）和数据的全局集中管理（Redux存储），同时避免了localStorage的安全问题，也比全局useForm的耦合度更低。

另外，如果不想用Redux，也可以使用React Context来封装注册数据的状态和操作，原理和Redux类似，只是更轻量化，适合不需要全局状态的场景。

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