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),
  []
);
相关推荐
xw57 分钟前
uni-app项目loading显示方案
前端·uni-app
!win !12 分钟前
uni-app项目loading显示方案
前端·uni-app
z_y_j22997043830 分钟前
vue前端项目打包和部署
前端·javascript·vue.js
lbchenxy31 分钟前
antd vue a-range-picker如何设置不能选择当前和之后的时间,包含时分秒
前端·javascript·vue.js
RR133539 分钟前
一个小错误:Content-Type ‘text/plain;charset=UTF-8‘ is not supported 的粗心
开发语言·前端·javascript
满分观察网友z44 分钟前
uni-app Swiper 不是只会轮播图!看我如何从青铜到王者,玩转卡片式联动轮播
前端
北辰alk1 小时前
设计并实现可复用的表格组件(支持分页、排序和筛选)
前端
PasserbyX1 小时前
输入URL后发生了什么
前端·javascript
GIS之路1 小时前
将 CSV 转换为 Shp 数据
前端
holdonononnn1 小时前
什么是 Monorepo ? 如何实现?
架构·前端框架