如何将表单对象作为Props传递给React函数组件？多步骤表单问题排查

错误原因 #

你遇到的输入框无内容显示但控制台有输出的问题，核心是受控组件的状态同步逻辑错误：

• 汇总步骤的输入框虽然绑定了value，但这个值没有和实际的表单状态联动，或者onChange事件没有正确更新对应的状态字段。
• 若你把各步骤的表单数据存在独立的state中，汇总步骤的输入框可能没有正确引用这些数据，或者修改时未更新对应状态，导致输入框始终显示初始值。

修复步骤 #

1. 统一表单状态：用单个state对象存储所有步骤的表单数据，避免分散管理：

const [formData, setFormData] = useState({
  step1: { name: '', email: '' },
  step2: { address: '', phone: '' }
});

2. 受控输入框正确绑定：每个步骤的输入框都关联到formData的对应字段，onChange时同步更新状态：

// 步骤1的姓名输入示例
<input
  type="text"
  value={formData.step1.name}
  onChange={(e) => setFormData(prev => ({
    ...prev,
    step1: { ...prev.step1, name: e.target.value }
  }))}
/>

3. 汇总步骤同步状态：汇总步骤的输入框直接引用formData中的字段，修改时同样更新统一状态：

// 汇总步骤的姓名显示与修改示例
<input
  type="text"
  value={formData.step1.name}
  onChange={(e) => setFormData(prev => ({
    ...prev,
    step1: { ...prev.step1, name: e.target.value }
  }))}
/>

更优实现方案 #

1. 用useReducer管理复杂状态：多步骤表单逻辑较多时，useReducer比useState更清晰，将状态更新逻辑集中处理：

function formReducer(state, action) {
  switch (action.type) {
    case 'UPDATE_STEP':
      return {
        ...state,
        [action.step]: { ...state[action.step], ...action.payload }
      };
    default:
      return state;
  }
}

// 使用时
const [formData, dispatch] = useReducer(formReducer, initialState);

// 更新字段
dispatch({
  type: 'UPDATE_STEP',
  step: 'step1',
  payload: { name: e.target.value }
});

2. 基于步骤状态的条件渲染：通过currentStep状态控制显示对应步骤的组件，避免重复创建组件导致状态丢失：

switch(currentStep) {
  case 1: return <Step1 formData={formData} dispatch={dispatch} />;
  case 2: return <Step2 formData={formData} dispatch={dispatch} />;
  case 3: return <Summary formData={formData} dispatch={dispatch} />;
  default: return null;
}

3. 步骤切换时前置验证：在每个步骤跳转前做字段校验，避免到汇总步骤才暴露错误，提升用户体验。

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