redux-form表单onChange防抖提交的异常问题咨询

我来帮你拆解这个问题的核心原因：

你设置的500ms防抖逻辑只关心用户停止输入的时间间隔，但完全没考虑到redux-form的异步提交状态。具体来说：

1. 当用户第一次停止输入500ms后，防抖触发了提交，这时候表单进入submitting: true的状态，而你的onSubmit要跑5秒才会结束；
2. 当你输入两个字符后等待1秒，此时第一次提交还在后台跑着（5秒还没到），防抖逻辑又触发了第二次提交调用。但redux-form在submitting状态下重复执行提交函数，会导致表单内部的状态冲突——比如提交状态、字段状态的不一致，这就是你看到的异常根源。

补充一句：默认的防抖函数（比如lodash的debounce）只处理时间维度的触发，不会管被防抖的函数是不是异步、有没有执行完，所以它不会自动阻止这种冲突。

针对这个场景，有几个实用的解决思路，你可以按需选择：

1. 结合表单提交状态拦截防抖触发 #

最简单的方式是，在防抖的提交逻辑里先判断当前表单是不是正在提交，如果是就直接跳过。

首先你需要从redux-form的props里拿到submitting状态，然后修改防抖逻辑：

import { debounce } from 'lodash';

class WeekForm extends React.Component {
  componentDidMount() {
    // 在这里创建防抖函数，确保能获取到最新的表单状态
    this.debouncedSubmit = debounce((submit, isSubmitting) => {
      if (!isSubmitting) {
        submit();
      }
    }, 500);
  }

  handleFieldChange = () => {
    // 每次字段变化时，传入最新的提交函数和提交状态
    this.debouncedSubmit(this.props.submit, this.props.submitting);
  };

  render() {
    return <Field type="text" onChange={this.handleFieldChange} />;
  }
}

export default reduxForm({
  form: 'week-form',
  onSubmit: async () => {
    await new Promise(resolve => setTimeout(resolve, 5000));
  }
})(WeekForm);

这种方法直接利用redux-form自带的状态做拦截，代码改动小，能快速解决重复提交的问题。

2. 自定义带异步锁的防抖函数 #

如果需要更精准的控制，你可以自己封装一个防抖函数，确保上一次异步提交没完成前，不会触发新的调用：

// 自定义带异步锁的防抖函数
function asyncDebounce(func, wait) {
  let timeoutId;
  let isPending = false;

  return async (...args) => {
    // 如果上一次提交还在进行中，直接返回
    if (isPending) return;

    // 清除之前的等待计时器
    if (timeoutId) clearTimeout(timeoutId);

    timeoutId = setTimeout(async () => {
      try {
        isPending = true;
        await func(...args);
      } finally {
        // 不管提交成功还是失败，都解锁
        isPending = false;
      }
    }, wait);
  };
}

// 组件中使用
class WeekForm extends React.Component {
  // 用自定义的asyncDebounce创建防抖提交函数
  debouncedSubmit = asyncDebounce(this.props.submit, 500);

  render() {
    return <Field type="text" onChange={this.debouncedSubmit} />;
  }
}

export default reduxForm({
  form: 'week-form',
  onSubmit: async () => {
    await new Promise(resolve => setTimeout(resolve, 5000));
  }
})(WeekForm);

这个自定义的防抖函数会在异步提交期间“锁住”，不会触发新的请求，完美适配你的长耗时提交场景。

3. 提交开始时取消等待中的防抖触发 #

你也可以在组件更新时，根据表单的提交状态来取消还在等待的防抖计时器：

import { debounce } from 'lodash';

class WeekForm extends React.Component {
  debouncedSubmit = debounce(this.props.submit, 500);

  componentDidUpdate(prevProps) {
    // 当表单开始提交时，取消所有等待中的防抖触发
    if (!prevProps.submitting && this.props.submitting) {
      this.debouncedSubmit.cancel();
    }
  }

  render() {
    return <Field type="text" onChange={this.debouncedSubmit} />;
  }
}

export default reduxForm({
  form: 'week-form',
  onSubmit: async () => {
    await new Promise(resolve => setTimeout(resolve, 5000));
  }
})(WeekForm);

这种方法可以避免在提交过程中，还有等待中的防抖触发被执行，进一步减少冲突的可能。

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