使用React-Hook-Form向导表单时，状态变量不显示在输入框

核心问题原因 #

1. Class Component 与 React Hook Form/Little State Machine 的兼容性冲突：React Hook Form 核心依赖函数组件的 Hooks（如useForm），Class Component 无法直接适配这些 Hooks，手动绑定值时容易忽略状态变化的监听逻辑，导致回显失败；同时 Little State Machine 的状态更新后，Class Component 可能因未正确触发重渲染，无法同步最新值到表单控件。
2. 此前函数组件状态更新失败的根源：未正确结合 Little State Machine 的useStateMachine钩子与 React Hook Form 的表单值更新逻辑，比如没有用getValues获取表单值后调用状态更新 action，或者未通过reset/setValue同步全局状态到表单。

解决方案：回归函数组件 + 正确整合 Hooks #

1. 全局状态配置（Little State Machine） #

先初始化全局存储表单数据的状态容器：

import { createStore } from 'little-state-machine';

createStore({
  formData: {} // 以步骤标识为key，存储对应步骤的表单数据
});

2. 封装字段模板函数组件 #

用 React Hook Form 的Controller组件统一处理不同类型的表单字段，确保值的双向绑定与状态同步：

import { Controller } from 'react-hook-form';

// 通用字段模板，支持输入框、下拉框等类型扩展
const FieldTemplate = ({ fieldConfig, control }) => {
  const { name, label, type, options = [] } = fieldConfig;

  switch (type) {
    case 'input':
      return (
        <div className="form-row">
          <label>{label}</label>
          <Controller
            control={control}
            name={name}
            render={({ field }) => <input {...field} type="text" />}
          />
        </div>
      );
    case 'select':
      return (
        <div className="form-row">
          <label>{label}</label>
          <Controller
            control={control}
            name={name}
            render={({ field }) => (
              <select {...field}>
                {options.map(opt => (
                  <option key={opt.value} value={opt.value}>
                    {opt.label}
                  </option>
                ))}
              </select>
            )}
          />
        </div>
      );
    // 可扩展checkbox、radio等其他字段类型
    default:
      return null;
  }
};

3. 向导步骤组件（整合表单与全局状态） #

处理步骤切换时的状态同步，确保返回步骤时表单能回显已保存的值：

import { useForm } from 'react-hook-form';
import { useStateMachine } from 'little-state-machine';
import { useEffect } from 'react';
import FieldTemplate from './FieldTemplate';

// Little State Machine 的状态更新Action
const updateFormData = (state, payload) => ({
  ...state,
  formData: { ...state.formData, ...payload }
});

const WizardStep = ({ fields, stepKey, onNext, onPrev }) => {
  const { actions, state } = useStateMachine(updateFormData);
  // 初始化表单默认值为当前步骤已保存的数据
  const { control, getValues, reset } = useForm({
    defaultValues: state.formData[stepKey] || {}
  });

  // 切换到当前步骤时，重置表单为已保存的值
  useEffect(() => {
    reset(state.formData[stepKey] || {});
  }, [stepKey, state.formData, reset]);

  const handleNext = () => {
    // 获取当前步骤的所有表单值
    const stepValues = getValues();
    // 更新到全局状态
    actions.updateFormData({ [stepKey]: stepValues });
    // 执行步骤切换逻辑
    onNext();
  };

  const handlePrev = () => {
    // 上一步前也可保存当前值，避免丢失
    const stepValues = getValues();
    actions.updateFormData({ [stepKey]: stepValues });
    onPrev();
  };

  return (
    <div className="wizard-step">
      {fields.map(field => (
        <FieldTemplate key={field.name} fieldConfig={field} control={control} />
      ))}
      <div className="wizard-buttons">
        {onPrev && <button onClick={handlePrev}>上一步</button>}
        <button onClick={handleNext}>下一步</button>
      </div>
    </div>
  );
};

4. 解析JSON动态生成表单 #

将JSON配置文件导入后，直接传入向导步骤组件即可实现动态表单：

// 示例formConfig.json内容
// {
//   "step1": [
//     {"name": "username", "label": "用户名", "type": "input"},
//     {"name": "role", "label": "角色", "type": "select", "options": [{"value": "admin", "label": "管理员"}, {"value": "user", "label": "普通用户"}]}
//   ],
//   "step2": [
//     {"name": "email", "label": "邮箱", "type": "input"},
//     {"name": "phone", "label": "手机号", "type": "input"}
//   ]
// }
import formConfig from './formConfig.json';
import { useState } from 'react';

// 主向导组件
const Wizard = () => {
  const [currentStep, setCurrentStep] = useState('step1');
  const totalSteps = Object.keys(formConfig);

  const handleNext = () => {
    const currentIndex = totalSteps.indexOf(currentStep);
    if (currentIndex < totalSteps.length - 1) {
      setCurrentStep(totalSteps[currentIndex + 1]);
    }
  };

  const handlePrev = () => {
    const currentIndex = totalSteps.indexOf(currentStep);
    if (currentIndex > 0) {
      setCurrentStep(totalSteps[currentIndex - 1]);
    }
  };

  return (
    <div className="wizard">
      <WizardStep 
        fields={formConfig[currentStep]} 
        stepKey={currentStep} 
        onNext={handleNext} 
        onPrev={currentStep !== totalSteps[0] ? handlePrev : undefined}
      />
    </div>
  );
};

关键逻辑说明 #

• Controller组件：替代手动绑定value和onChange，让React Hook Form完全接管表单控件的状态管理，避免值同步遗漏。
• useEffect监听状态：当步骤切换或全局表单数据变化时，自动重置当前表单的默认值，确保回显正确。
• 统一状态更新：通过getValues获取表单数据后，调用Little State Machine的action更新全局状态，保证各步骤数据的一致性。

内容的提问来源于stack exchange，提问作者Tom Holbrook