React-Redux Form 7.2.3验证失效与提交值异常问题求助

嘿，我来帮你排查react-redux-form 7.2.3的这个表单问题！

核心问题分析 #

你遇到的两个现象其实是关联的：

1. 提交时取initialValues而非实际输入：这大概率是因为表单控件没有正确和Redux Store里的表单状态做双向绑定，导致用户输入完全没更新到Store里，提交时自然只能读到初始值。
2. 不设置initialValues验证永远不通过：react-redux-form的验证逻辑是基于Store里的表单状态的，如果没有初始值，字段默认是undefined，而你的验证规则（比如必填检查）会直接判定不通过。

解决步骤（不用手动在onChange设置initialValues！） #

这是个误区，react-redux-form的Field组件会自动处理输入到Store的更新，只要配置正确，完全不需要手动干预。下面是具体的修正方向：

1. 确保用reduxForm和Field组件正确包装表单

你必须用react-redux-form提供的reduxForm高阶组件包裹你的表单组件，同时用Field替代原生input/textarea等控件，这样才能实现自动的状态绑定：

import { reduxForm, Field } from 'react-redux-form';

// 你的表单组件
class SecurityExemptionsNew extends Component {
  handleSubmit = (values) => {
    // 这里的values就是用户实际输入的内容了
    console.log('提交数据:', values);
    // 执行你的API提交逻辑
  }

  render() {
    const { handleSubmit } = this.props;
    return (
      <form onSubmit={handleSubmit(this.handleSubmit)}>
        {/* 用Field绑定字段，name要和initialValues的键对应 */}
        <div>
          <label>豁免类型</label>
          <Field name="exemptionType" component="input" type="text" />
        </div>
        <div>
          <label>豁免原因</label>
          <Field name="reason" component="textarea" />
        </div>
        <button type="submit">提交</button>
      </form>
    );
  }
}

2. 正确配置initialValues和验证规则

在reduxForm的配置里设置initialValues，给字段一个合理的初始值（比如空字符串），同时调整验证逻辑适配初始状态：

// 验证函数示例
const validate = (values) => {
  const errors = {};
  // 检查字段是否为空（此时初始值是空字符串，不会触发错误）
  if (!values.exemptionType.trim()) {
    errors.exemptionType = '请输入豁免类型';
  }
  if (!values.reason.trim()) {
    errors.reason = '请输入豁免原因';
  }
  return errors;
};

// 用reduxForm包装组件并配置
export default reduxForm({
  form: 'securityExemptionsForm', // 表单唯一标识
  initialValues: {
    exemptionType: '',
    reason: ''
  },
  validate // 绑定验证函数
})(SecurityExemptionsNew);

3. 特殊场景：从Props传递初始值

如果你的初始值是从父组件Props传入的，记得加上enableReinitialize: true，这样当Props里的初始值变化时，表单会重新初始化：

reduxForm({
  form: 'securityExemptionsForm',
  initialValues: (props) => props.defaultValues, // 从Props取初始值
  enableReinitialize: true, // 允许重新初始化
  validate
})(SecurityExemptionsNew);

关键提醒 #

千万别手动在onChange里设置initialValues，这会覆盖Store里的用户输入状态，反而加重问题。react-redux-form的核心就是自动管理表单状态，只要用对Field和reduxForm，输入更新和状态同步都是自动完成的。

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