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),
  []
);
相关推荐
Up九五小庞13 分钟前
开源埋点分析平台 ClkLog 本地部署 + Web JS 埋点测试实战--九五小庞
前端·javascript·开源
摘星编程36 分钟前
React Native + OpenHarmony:UniversalLink通用链接
javascript·react native·react.js
qq_177767371 小时前
React Native鸿蒙跨平台数据使用监控应用技术,通过setInterval每5秒更新一次数据使用情况和套餐使用情况,模拟了真实应用中的数据监控场景
开发语言·前端·javascript·react native·react.js·ecmascript·harmonyos
烬头88211 小时前
React Native鸿蒙跨平台应用实现了onCategoryPress等核心函数,用于处理用户交互和状态更新,通过计算已支出和剩余预算
前端·javascript·react native·react.js·ecmascript·交互·harmonyos
2601_949593653 小时前
基础入门 React Native 鸿蒙跨平台开发:卡片组件
react native·react.js·harmonyos
天人合一peng3 小时前
Unity中button 和toggle监听事件函数有无参数
前端·unity·游戏引擎
方也_arkling4 小时前
别名路径联想提示。@/统一文件路径的配置
前端·javascript
毕设源码-朱学姐4 小时前
【开题答辩全过程】以 基于web教师继续教育系统的设计与实现为例,包含答辩的问题和答案
前端
qq_177767374 小时前
React Native鸿蒙跨平台剧集管理应用实现,包含主应用组件、剧集列表、分类筛选、搜索排序等功能模块
javascript·react native·react.js·交互·harmonyos
qq_177767374 小时前
React Native鸿蒙跨平台自定义复选框组件,通过样式数组实现选中/未选中状态的样式切换,使用链式调用替代样式数组,实现状态驱动的样式变化
javascript·react native·react.js·架构·ecmascript·harmonyos·媒体