React使用 lodash-es 中的throttle方法失效

React使用 lodash-es 中的throttle方法失效

下面代码用了throttle方法,但是并没有实现1500内执行一次的效果,主要原因是useState的setValue()方法

该方法更新了state,导致了组件重新渲染,并且重新生成了函数,所以1500毫秒又被重置了

javascript 复制代码
// ****** 错误 ******
const onAction = throttle(async () => {
  const params = {};
  const res = await API.loanSubmitSubmitApi(params);
  if (res.code === 200) {
    setValue('XXXX')
  }
}, 1500);

// ****** 正确 ******
// 这里为什么步用useCallback,具体原因没细究,我看到相关issue的回答就是改成useMemo.
// 如果需要用到load接口中的数据并且数据存在state中,这里的依赖项就应该是[loadData],不添加依赖项的话,会获取不到load的接口数据
const onAction = useMemo(
  () =>
    throttle(async () => {
      const params = {};
      const res = await API.xxxxxApi(params);
      if (res.code === 200) {
        setValue("XXXX");
      }
    }, 1500),
  []
);
相关推荐
月下点灯2 分钟前
uniapp仿抖音评论区popup对话框实现(多端兼容)
前端·javascript·vue.js
江城开朗的豌豆12 分钟前
React的渲染时机:聊透虚拟DOM的更新机制
前端·javascript·react.js
anyup19 分钟前
🔥🔥 uView Pro:Vue3+TS重构的uni-app开源组件库,文档免费无广告!
前端·vue.js·uni-app
CodeSheep28 分钟前
我天,Java 已沦为老四。。
前端·后端·程序员
前端小巷子1 小时前
Vue 逻辑抽离全景解析
前端·vue.js·面试
excel1 小时前
前端事件机制入门到精通:事件流、冒泡捕获与事件委托全解析
前端
Moment1 小时前
Next.js 15.5 带来 Turbopack Beta、Node 中间件稳定与 TypeScript 强化 🚀🚀🚀
前端·javascript·react.js
yzzzzzzzzzzzzzzzzz2 小时前
初识javascript
前端·javascript
excel3 小时前
硬核 DOM2/DOM3 全解析:从命名空间到 Range,前端工程师必须掌握的底层知识
前端
专注API从业者10 小时前
Python + 淘宝 API 开发:自动化采集商品数据的完整流程
大数据·运维·前端·数据挖掘·自动化