表单做防抖处理要注意的问题

经常遇到防抖函数写了又不起作用的朋友可以看看是否是因为这个原因
防抖：
通俗理解为：规定时间内多次重复操作最终只执行一次修改（业务逻辑）

import React, { useState } from 'react';
import { Button, Form, Input } from 'antd';

// 防抖
function debounce(fn: Function, delay = 500) {
  let timeoutId: any;
  return function (this: any) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  };
}

const formItemLayout = {
  labelCol: { span: 2 },
  wrapperCol: { span: 6 }
};

export default function learn8() {
  const [formState, setformState] = useState({
    username: '',
    userpwd: ''
  });

  // 1、防抖函数的业务处理一定要放在 表单onValuesChange外面
  // 2、否则 防抖函数不生效因为每次 onChange 都会创建一个新的setTimeOut
  const formDebounce = debounce(function () {
    const params = [...arguments]; // 参数
    console.log(params, 'params-防抖500ms');
    // 业务逻辑
    setformState((pre) => ({
      ...pre,
      ...params[0]
    }));
  });

  const formChangeHandle = (value: any) => {
    // console.log(value);

    // 如果把 formDebounce 防抖函数写在这里 防抖功能就会失效,原因看上面第2点
    // const formDebounce = debounce(function () {
    //   const params = [...arguments]; // 参数
    //   console.log(params, 'params-防抖500ms');
    //   // 业务逻辑
    //   setformState((pre) => ({
    //     ...pre,
    //     ...params[0]
    //   }));
    // });

    formDebounce(value);
  };

  return (
    <div>
      <Form name="test" {...formItemLayout} onValuesChange={formChangeHandle}>
        <Form.Item label="username" name="username">
          <Input />
        </Form.Item>
        <Form.Item label="userpwd" name="userpwd">
          <Input />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            submit
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}