redux-form向导表单切换步骤后错误全显问题咨询

我之前也踩过这个坑！这个问题本质是redux-form在步骤切换时，没有自动重置未激活步骤字段的touched和错误状态，当你第二次进入第二步时，这些旧状态被保留，导致所有错误直接显示出来。至于forceUnregisterOnUnmount没用，是因为它会直接把字段从表单状态里彻底移除——虽然错误没了，但你之前输入的数据也会丢失，这显然不是你想要的效果。

给你几个实用的解决方案，按需选择：

方案一：切换步骤时清除未激活字段的touched状态 #

这个方法能保留你输入的所有数据，同时把未显示步骤的字段标记为「未触碰」，这样只有当用户再次操作这些字段时，错误才会触发显示。

你可以借助redux-form提供的untouch action creator实现：

import { untouch } from 'redux-form';

// 假设你的表单名为'wizardForm'，第二步的字段是email、password
const switchStep = (targetStep) => {
  // 当从第二步切回第一步时，清除第二步字段的touched状态
  if (targetStep === 1) {
    dispatch(untouch('wizardForm', ['email', 'password']));
  }
  // 其他步骤切换逻辑，比如更新当前步骤的组件state
  setCurrentStep(targetStep);
};

方案二：让validate函数只验证当前步骤的字段 #

修改全局的validate函数，让它根据当前步骤只校验对应字段，这样切换到第二步时，不会去校验第一步的字段，自然也不会生成无关的错误信息。

// 把当前步骤通过props传递给validate函数
const validate = (values, { currentStep }) => {
  const errors = {};

  if (currentStep === 1) {
    // 只校验第一步的字段
    if (!values.firstName) {
      errors.firstName = '请输入姓名';
    }
    if (!values.lastName) {
      errors.lastName = '请输入姓氏';
    }
  } else if (currentStep === 2) {
    // 只校验第二步的字段
    if (!values.email) {
      errors.email = '请输入邮箱';
    }
    if (!values.password) {
      errors.password = '请输入密码';
    }
  }

  return errors;
};

然后在表单组件里，把当前步骤作为props传给reduxForm高阶组件：

export default reduxForm({
  form: 'wizardForm',
  validate
})(WizardForm);

// 在WizardForm的父组件或自身state中传入currentStep
<WizardForm currentStep={this.state.currentStep} />

方案三：控制Field组件的错误显示逻辑 #

在自定义的Field渲染组件里，只在字段被触碰过或者表单提交失败时才显示错误，从根源避免切换步骤时自动弹出错误。

const renderField = ({ input, label, meta: { touched, error, submitFailed } }) => (
  <div className="form-group">
    <label>{label}</label>
    <input {...input} className="form-control" placeholder={label} />
    {/* 只有当字段被触碰过，或者表单提交失败时，才显示错误 */}
    {(touched || submitFailed) && error && (
      <span className="text-danger">{error}</span>
    )}
  </div>
);

这个方案最灵活，你可以完全控制错误显示的时机，还不会影响表单数据的保存。

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