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),
  []
);
相关推荐
乐兮创想 小林5 分钟前
B2B 内容营销的工程化运营:从内容矩阵建模到 SEO/GEO 联动的完整体系
前端·线性代数·矩阵·网站建设·北京网站建设公司
2501_940041745 分钟前
全栈开发提速指南:可以直接用的项目生成提示词
前端·prompt
BomanGe27 分钟前
NSK直线导轨LH55EL与NH55EM替代指南
前端·javascript·数据库·经验分享·规格说明书
云水一下7 分钟前
Vue.js从零到精通系列(四):前端路由与Vue Router——打造多页单页应用
前端·javascript·vue.js
糯米导航9 分钟前
浏览器解析HTML头部的底层逻辑:从字节流到渲染树的关键一步
前端·html
风骏时光牛马13 分钟前
C++开发常见问题与解决方案汇总
前端
zhedream15 分钟前
Vue 3 Teleport 报错实录:从 patch 时机到 `defer` 属性
前端·vue.js
雁北向15 分钟前
自定义指令 数值输入显示优化 巴飞特 测试
前端·vue.js
研☆香17 分钟前
jQuery补充知识点
前端·javascript·jquery
lichenyang45321 分钟前
打车票根卡片 UI 重构:从 Circle 挖洞到 clipShape PathShape,再到 100% 自适应
前端