按钮更适合防抖-踩坑

在react 中使用防抖，注意函数被重新创建问题

在React中，连续点击按钮会导致防抖函数handleSubmit被多次调用的问题可能是由于每次渲染组件时，都会创建一个新的handleSubmit函数。这是一个常见的陷阱，因为每个新的handleSubmit函数都有自己的内部计时器，因此防抖效果不会如预期一样工作。

要解决这个问题，你可以将handleSubmit函数从组件的render方法中提取出来，以确保它只被创建一次。例如，你可以使用useCallback hook：

import { cloneDeep, debounce } from 'lodash'

export const PositionMove = (props: FormItem) => {

  const handleSubmit = useCallback(debounce(
    (type: 'page' | 'template', isValid: boolean, values: SubmitParamsType) => {
      const handleSave = type === 'page' ? onSavePage : onSaveTemplate
      if (isValid) {
        handleSave(values)
      } else {
        message.warning('还有数据未录入完成,请添加完整再提交')
      }
    },
    2000,
    { leading: true,trailing: false },
  ),[])


  return (
    <div className='position-move'>
        <Button
          type="primary"
          onClick={() => handleSubmit('page', isValid, values)}
          className="common-right-mg"
        >
          保存为页面
        </Button>
    </div>
  )
}