【React】使用lodash的debounce未生效

react中直接使用lodash的debounce函数,发现并未生效,1秒内多次触发,控制台仍有多次打印,这是因为debounceSearch函数被重新定义了,需要使用useCallback来包装函数。

javascript 复制代码
import { ChangeEvent } from "react"
import { useCallback, useState } from "react"
import { Input } from "antd"
import _ from "lodash"

export default () => {
	const [idValue, setIdValue] = useState<string>("")
	const debounceSearch = _.debounce((value) => {
	    console.log(value)
	  }, 1000)
	)
	const onIptChange = (e: ChangeEvent<HTMLInputElement>) => {
	  debounceSearch(e.target.value)
	}

	return <Input value={idValue} onChange={onIptChange}/>
}

使用useCallback,可以将这个函数缓存起来,避免重复定义。

javascript 复制代码
const debounceSearch = useCallback(
  _.debounce((value) => {
    console.log(value)
  }, 1000),
  []
)
相关推荐
浪裡遊1 天前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
課代表1 天前
JavaScript 二维数组的三种定义与初始化方法
javascript·初始化·二维数组·多维数组·动态数组·循环遍历·数组合并
鸡吃丸子1 天前
Next.js 入门指南
开发语言·javascript·next.js
罚时大师月色1 天前
Vue+ts 如何实现父组件和子组件通信
javascript·vue.js·ecmascript
漂流瓶jz1 天前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化
samroom1 天前
iframe实战:跨域通信与安全隔离
前端·安全
fury_1231 天前
vue3:数组的.includes方法怎么使用
前端·javascript·vue.js
weixin_405023371 天前
包资源管理器NPM 使用
前端·npm·node.js
宁&沉沦1 天前
Cursor 科技感的登录页面提示词
前端·javascript·vue.js