React多步表单切换步骤时输入值跨步骤残留问题排查

云上老周

2026-8-26

问题根因

跨步骤输入值串扰由两个核心缺陷导致：

表单项列表使用数组下标作为key属性。切换步骤时，React会判定相同下标的DOM节点为同一组件，直接复用节点而非重新挂载，第一步输入框的DOM内部状态会被直接带到第二步同位置输入框上
TextField组件通过defaultValue设置为非受控模式，输入值完全由DOM自身维护，没有和React状态中对应步骤的表单数据绑定，节点复用时旧值无法被自动重置
附带逻辑缺陷：步骤完成度校验使用宽松相等判断，未区分复选框布尔值和文本输入值的校验规则，会出现复选框选“否”时无法判定为已填写的问题

修复代码

按以下顺序修改即可解决问题：

替换列表key，避免节点错误复用
将原来基于数组下标的key替换为每个表单项唯一的name字段，保证不同步骤的表单项不会被React判定为同一节点：

// 原代码 key={'form_input_'+i} 替换为
<Grid key={`form_input_${stepInput.name}`}>

普通输入框、复选框两个分支的Grid key都要同步修改。

将输入框改为受控模式，绑定对应步骤的状态值
删除TextField上的defaultValue=''属性，替换为value属性，绑定当前步骤对应字段的存储值，切换步骤时自动加载对应步骤的已填内容，未填写时默认为空：

<TextField
  onChange={handleChange}
  // 新增value绑定，删除原defaultValue
  value={formData[currentStep.step][stepInput.name] ?? ''}
  aria-label={stepInput.label}
  label={stepInput.label}
  name={stepInput.name}
  type={stepInput.type}
  required={stepInput.required}
/>

修正步骤完成度校验逻辑
区分输入类型做校验，使用严格相等避免隐式类型转换导致的判断错误：

function checkForStepCompletion() {
  let counter = 0;
  const stepFields = form[currentStep.step];
  const stepValues = formData[currentStep.step];
  stepFields.forEach(field => {
    const val = stepValues[field.name];
    if (field.type === "yes-no") {
      // 复选框只要值为布尔类型（无论true/false）就算已选择
      if (typeof val === "boolean") counter++;
    } else {
      // 文本输入去掉首尾空格后非空就算已填写
      if (typeof val === "string" && val.trim().length > 0) counter++;
    }
  })
  setCurrentStep(prev => ({
    ...prev,
    inputsCompleted: counter,
    completed: counter === stepFields.length
  }))
}

可选优化：避免状态闭包问题
更新状态时优先使用函数式更新，避免异步更新场景下拿到旧的状态值导致数据写入错误：

function handleChange(event) {
  const { name, type, checked, value } = event.target;
  const fieldValue = type === "checkbox" ? checked : value;
  setFormData(prev => prev.map((stepItem, stepIndex) => {
    if (stepIndex === currentStep.step) {
      return { ...stepItem, [name]: fieldValue }
    }
    return stepItem;
  }))
}

修改完成后，切换步骤时输入框会正确读取对应步骤的表单值，不会再出现值串扰的问题。

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