react使用antd的Autocomplate時，給onSearch運用lodash的防抖debounce不生效

場景：react hook，ts，antd，lodash

問題：如下這段代碼（簡），意圖是在輸入框輸入值搜索的時候請求后台數據，並得到數據渲染，為了防止輸入還未鍵入完全就執行請求，

故加了lodash所提供的防抖方法，卻發現此時效果卻是延遲1秒后發了一堆請求，顯然這樣是行不通的

import _ from 'lodash'
const handSearch = _.debounce((val: string) => {
    if (val) {
      let param = {
        test: val,
      }
      getData(param)//此方法發請求獲取搜索數據並setData
    } 
  }, 1000)
<AutoComplete onSearch={handSearch} allowClear>
          {data?.map((item: any) => (
            <Option key={item.id} value={item.value}>
              {item.value}
            </Option>
          ))}
</AutoComplete>

解決方案：

使用useCallBack進行處理

const handSearch = useCallBack(_.debounce((val: string) => {
    if (val) {
      let param = {
        test: val,
      }
      getData(param)//此方法獲取搜索數據並setData
    } 
  },1000), [])

此時就可以實現想要的防抖效果了，輸入完成后只發一次請求