场景: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), [])
此时就可以实现想要的防抖效果了,输入完成后只发一次请求