React类组件内props.submit无效但外部可用的问题解决

1. 先修正拼写错误 #

你的mapStateToProps里getFormValues('AddSupliesForm')存在拼写错误，应该是AddSuppliesForm（少了字母p），这个错误会导致无法正确获取表单值，直接影响后续验证结果的判断。

2. 核心问题：Redux状态更新异步导致判断失效 #

调用this.props.submit和this.props.touch后，Redux中formErrors的状态不会立刻更新——Redux状态更新是异步的。你在handleSave里紧接着判断!this.props.formErrors，拿到的还是更新前的旧值，自然无法正确判断验证结果。

3. 具体修复方案 #

方案一：用redux-form自带的handleSubmit简化流程 #

redux-form提供了handleSubmit高阶函数，会自动触发表单验证，只有验证通过才会执行你的提交逻辑，无需手动调用submit和touch：

// 在SupplyPage组件内引入handleSubmit
import { handleSubmit } from 'redux-form';

// 修改steps里SupplyForm的onSubmit绑定
content: (
  <SupplyForm
    initialValues={props?.supplyList}
    onSubmit={handleSubmit(this.handleSave)} // 用handleSubmit包裹你的handleSave
  />
),

然后简化handleSave，此时传入的formValue已经是验证通过后的有效值：

handleSave = (formValue) => {
  // 直接处理创建逻辑即可
  return this.handleCreateSupply(formValue);
}

方案二：手动触发验证后通过异步方式判断结果 #

如果必须手动调用submit和touch，可以通过setTimeout等待状态更新（临时方案），或者使用redux-thunk处理异步流程（推荐）：

临时方案（setTimeout）

handleSave = (e, formValue) => {
  e.preventDefault();
  this.props.submit('AddSuppliesForm');
  this.props.touch('AddSuppliesForm');
  
  // 等待状态更新后再判断
  setTimeout(() => {
    // 注意：要判断错误对象是否为空，而非直接判断是否存在
    if (!Object.keys(this.props.formErrors || {}).length) {
      this.handleCreateSupply(formValue);
    }
  }, 0);
}

推荐方案（redux-thunk）

1. 确保项目已启用redux-thunk中间件
2. 定义thunk action处理验证和提交逻辑：

// 定义thunk action
const saveSupply = (formValue) => (dispatch, getState) => {
  dispatch(submit('AddSuppliesForm'));
  dispatch(touch('AddSuppliesForm'));
  
  // 获取更新后的表单错误
  const formErrors = getFormSyncErrors('AddSuppliesForm')(getState) || {};
  if (!Object.keys(formErrors).length) {
    // 执行创建Supply的action
    return dispatch(createSupply(formValue));
  }
};

// 在mapDispatchToProps中添加这个action
const mapDispatchToProps = (dispatch) => ({
  ...bindActionCreators(
    {
      submit,
      reset,
      touch,
      change,
      destroy,
      saveSupply // 新增thunk action
    },
    dispatch
  ),
});

// 修改handleSave调用
handleSave = (e, formValue) => {
  e.preventDefault();
  this.props.saveSupply(formValue);
}

4. 确认SupplyForm的redux-form绑定 #

确保你的SupplyForm组件是通过reduxForm高阶组件包裹，且表单名与你调用submit/touch时一致：

// SupplyForm.jsx示例
import { reduxForm } from 'redux-form';

const SupplyForm = (props) => {
  // 表单内容渲染逻辑
};

export default reduxForm({
  form: 'AddSuppliesForm' // 必须和调用时的表单名完全一致
})(SupplyForm);

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