redux-form结合mapStateToProps时onSubmit函数无法触发问题

嘿，我之前也踩过一模一样的坑！问题大概率出在reduxForm和connect的包裹顺序上，咱们一步步理清楚：

核心问题：组件包装顺序搞反了 #

redux-form的高阶组件reduxForm()需要先包裹你的表单组件，把表单相关的核心props（比如handleSubmit、values这些）注入进去，然后再用connect(mapStateToProps)去包裹这个已经被reduxForm处理过的组件。如果顺序反过来，connect先把组件包起来，reduxForm的关键props就没法正确传递到你的表单里，自然onSubmit就触发不了。

正确的写法示例 #

先看错误的反例（就是你现在可能的写法）：

// ❌ 错误顺序：先connect再reduxForm
const ConnectedForm = connect(mapStateToProps)(ActualForm);
export default reduxForm({ form: 'myForm' })(ConnectedForm);

改成正确的顺序：

// ✅ 正确顺序：先reduxForm再connect
const FormWithRedux = reduxForm({
  form: 'categoryForm' // 必须给表单一个唯一标识
})(ActualForm);

export default connect(mapStateToProps)(FormWithRedux);

额外检查点 #

1. 确保表单里正确使用handleSubmit
   你的表单onSubmit必须绑定reduxForm提供的handleSubmit，并把自定义的onSubmit作为参数传进去，像这样：

<form onSubmit={handleSubmit(yourCustomOnSubmit)}>
  {/* 表单字段 */}
</form>

别直接写onSubmit={yourCustomOnSubmit}，那样redux-form的表单验证、数据收集逻辑都不会生效。

2. 避免mapStateToProps覆盖reduxForm的props
   检查你的mapStateToProps里有没有返回和reduxForm同名的属性（比如handleSubmit、values），如果有的话会覆盖掉reduxForm注入的props，导致功能异常。

完整代码参考 #

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

// 你的表单组件，接收reduxForm注入的handleSubmit和mapStateToProps传的categories
const CategoryForm = ({ handleSubmit, categories, onSubmit }) => (
  <form onSubmit={handleSubmit(onSubmit)}>
    <Field name="category" component="select">
      <option value="">请选择分类</option>
      {categories.map(category => (
        <option key={category.id} value={category.id}>
          {category.name}
        </option>
      ))}
    </Field>
    <button type="submit">提交</button>
  </form>
);

// 第一步：用reduxForm包装表单组件
const ReduxWrappedForm = reduxForm({
  form: 'categoryForm' // 表单唯一ID，必填
})(CategoryForm);

// 第二步：用connect注入分类数据
const mapStateToProps = state => ({
  categories: state.categories.list // 对应你的redux state里的分类数据路径
});

// 导出最终的组件
export default connect(mapStateToProps)(ReduxWrappedForm);

之前你没加mapStateToProps的时候，直接导出reduxForm包装后的组件，所有表单逻辑都能正常运行；加了connect之后顺序错了，就导致reduxForm的核心props没传进去，onSubmit自然触发不了。调整顺序后应该就能解决问题啦！

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