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), [])

此时就可以实现想要的防抖效果了,输入完成后只发一次请求


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM