zoukankan      html  css  js  c++  java
  • 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), [])
    

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

  • 相关阅读:
    poco之查看布局树
    airtest连接真机
    airtest之ADB调用
    airtest连接无线连接设备
    airtest之模拟器连接
    airtest之api、图片处理
    airtest介绍
    fidder保存请求和保存响应结果
    7 js之 条件语句
    IE6/IE7之浮动元素最后一个字母重复Bug
  • 原文地址:https://www.cnblogs.com/xinyouhunran/p/15263527.html
Copyright © 2011-2022 走看看