react事件回调中使用防抖失败的常见错误和正确使用方式
更新时间：2025年06月06日 09:24:02 作者：学习两年半的前端练习生
这篇文章主要介绍了react事件回调中使用防抖失败的常见错误和正确使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
使用时常见的错误和原因
问题：直接把debounce（防抖函数）当回调函数用（体现在debounce内执行函数，而不是函数本身）
报错代码：func is not a function TypeError: func is not a function at eval (http://localhost:3005/static/js/bundle.js:306181:32)。
原因：debounce的基本用法是：
传入一个“函数”和等待时间，返回一个新的“防抖后函数”。你应该调用返回的这个新函数，而不是在debounce内直接执行原函数。
onChange={(debounce(changeDepartmentId("123"), 300))}问题：直接把debounce（防抖函数）套在回调函数外面，但是debounce内的回调函数却没有执行任何内容。
错误代码和原因：对react中事件回调了解不够，导致防抖函数没有执行。
//这种的回调是把 debounce 函数作为属性传给子组件，而父中定义的changeDepartmentId只是单纯的函数
onChange={debounce(changeDepartmentId, 300)}
// 这种的回调是把 changeDepartmentId 函数作为属性传递给子组件，当onChange事件触发，子组件内调用 changeDepartmentId 函数
onChange={changeDepartmentId}
// 这种写法是直接在onChange事件中调用 changeDepartmentId 函数
onChange={(value)=>changeDepartmentId(value)}问题：正确使用了防抖但是没有起到防抖效果，常见原因和错误代码：
这样每次调用 changeDepartmentId，都会重新创建一个新的 debounce 实例，而不是复用同一个防抖函数。
这样的话，防抖的定时器每次都是新的，根本起不到“上一次未到时间就清除本次”的效果，所以没有防抖。
changeDepartmentId={(value) => {
debounce(setState(prev => ({ ...prev,id:value})), 300)
}}正确用法下的解决方案
在组件外部或 useCallback/useMemo 里只创建防抖函数，然后复用它。 （防止防抖函数重复创建）
//部门编号搜索联想，useCallback防止函数重新创建实例
const changeDepartmentId = useCallback(
//正确防抖
debounce((value: string) => {
//设置搜索值
setState(prev => ({ ...prev, searchData: { ...prev.searchData, departmentIdentifier: value } }))
}, 300),
[]
);
//使用回调
changeDepartmentId={changeDepartmentId}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了React中如何处理表单的复杂验证逻辑,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2025-03-03
在现代聊天应用中,除了文字和表情,图片分享也是一个重要的功能,本文将详细介绍如何在基于 React 的聊天应用中实现图片上传和预览功能,感兴趣的小伙伴跟着小编一起来看看吧2025-05-05
这篇文章主要为大家介绍了React setState是异步还是同步原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了Javascript React基础，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的同学可以参考一下2019-06-06
这篇文章主要介绍了React 模块联邦多模块项目实战详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要为大家详细介绍了如何在HTML页面中使用 React，使用使用js模块化的方式开发，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
react+axios实现github搜索用户功能(示例代码)
这篇文章主要介绍了react+axios实现搜索github用户功能,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-09-09
React Router v6 的路由懒加载有2种实现方式,1是使用react-router自带的 route.lazy,2是使用React自带的 React.lazy,下面我们就来看看它们的具体实现方法吧2024-04-04
解决React报错Parameter 'props' implicitly&nb
这篇文章主要为大家介绍了React报错Parameter 'props' implicitly has an 'any' type的解决处理方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
在React应用中,组件间的通信是常见的需求,通常,父组件通过props向子组件传递数据,但有时也需要子组件向父组件传递数据,本文将探讨如何在React中实现子组件向父组件传值的几种方法,需要的朋友可以参考下2025-04-04
最新评论