React Redux-Form：如何从 onSubmit 返回 Promise

服务器

使用React和Redux-Form开发表单时，经常会遇到需要在表单提交时返回一个Promise的情况。这样可以在提交表单的过程中进行异步操作，例如发送HTTP请求或者进行其他耗时操作。本文将介绍如何在Redux-Form的onSubmit函数中返回一个Promise，并提供一个简单的示例代码。

在Redux-Form中，onSubmit函数是在表单提交时被调用的。它接收两个参数：表单的值和一个dispatch函数，用于触发Redux的action。通常情况下，我们会在onSubmit函数中进行一些同步操作，例如验证表单的值是否合法，然后再通过dispatch函数触发一个action来更新Redux的状态。

但是，有时候我们希望在提交表单之前进行一些异步操作，例如向服务器发送请求，等待服务器的响应再进行下一步操作。为了实现这个目标，我们可以在onSubmit函数中返回一个Promise，然后在Promise的回调函数中进行异步操作。

下面是一个示例代码，演示了如何在Redux-Form的onSubmit函数中返回一个Promise：

Javascript
import React from 'react';
import { Field, reduxForm } from 'redux-form';
const onSubmit = (values, dispatch) => {
  return new Promise((resolve, reject) => {
    // 异步操作，例如向服务器发送请求
    setTimeout(() => {
      // 模拟异步操作的结果
      const response = { success: true };
      if (response.success) {
        // 如果异步操作成功，resolve Promise
        resolve();
      } else {
        // 如果异步操作失败，reject Promise
        reject({ _error: '提交表单失败' });
      }
    }, 2000);
  });
};
const renderField = ({ input, label, type, Meta: { touched, error } }) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} type={type} />
      {touched && error && <span>{error}</span>}
    </div>
  </div>
);
const MyForm = props => {
  const { handleSubmit, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <Field</p>          name="username"
          component={renderField}
          type="text"
          label="用户名"
        />
      </div>
      <div>
        <Field</p>          name="password"
          component={renderField}
          type="password"
          label="密码"
        />
      </div>
      <div>
        <button type="submit" disabled={submitting}>
          提交
        </button>
      </div>
    </form>
  );
};
const MyFormContAIner = reduxForm({
  form: 'myForm',
  onSubmit
})(MyForm);
export default MyFormContAIner;

在上述示例代码中，onSubmit函数返回了一个Promise。在Promise的回调函数中，我们模拟了一个异步操作，通过setTimeout函数延迟2秒来模拟服务器的响应时间。在异步操作完成后，根据异步操作的结果，我们可以调用resolve函数来表示异步操作成功，或者调用reject函数来表示异步操作失败。

在MyForm组件中，我们使用reduxForm函数将表单和onSubmit函数进行绑定。这样，当用户点击提交按钮时，reduxForm会自动调用onSubmit函数，并等待Promise的结果。如果Promise被resolve，Redux-Form会继续提交表单；如果Promise被reject，Redux-Form会显示表单提交失败的错误信息。

使用Promise的好处

使用Promise可以让我们更方便地处理异步操作。在传统的回调函数中，我们需要在异步操作中嵌套回调函数，导致代码结构复杂，可读性差。而使用Promise，可以将异步操作的结果通过resolve或reject传递给Promise的回调函数，使代码结构更加清晰，易于理解和维护。

本文介绍了如何在Redux-Form的onSubmit函数中返回一个Promise，并提供了一个简单的示例代码。通过使用Promise，我们可以在表单提交过程中进行异步操作，并根据异步操作的结果来决定是否提交表单。这种方式可以使我们的代码更具可读性和可维护性，同时提供了良好的用户体验。希望本文对你在React和Redux-Form开发中有所帮助。