我在玩React Native和lodash的debounce.

使用下面的代码只会让它像延迟一样工作,而不是debounce .

<Input
 onChangeText={(text) => {
  _.debounce(()=> console.log("debouncing"), 2000)()
 }
/>

如果我输入像"foo"这样的输入,我希望控制台只记录一次go Bounce.现在它记录了3次"go 盎司".

推荐答案

2019年:使用"useCallback"react 挂钩

在try 了许多不同的方法后,我发现使用"useCallback"是解决多个调用问题最简单、最有效的方法.

根据Hooks API documentation,"useCallback返回回调的一个记忆版本,只有当其中一个依赖项发生变化时才会改变."

将空数组作为依赖项传递可以确保回调只被调用一次.下面是一个简单的实现.

import React, { useCallback } from "react";
import { debounce } from "lodash";

const handler = useCallback(debounce(someFunction, 2000), []);

const onChange = (event) => {
    // perform any event related action here

    handler();
 };

希望这有帮助!

Reactjs相关问答推荐

如何创建react router v6的自定义子路由?

基本react 应用程序正在触发两次Use Effect

在动态React组件中删除事件侦听器

如何在REACTIVE js中动态添加或删除输入字段?

Github 操作失败:发布 NPM 包

Mui DataGrid 在第二页和前一页上显示项目时出现问题

从ReactDataGridtry 将数据传递给父组件

当我在 React Router Dom 中使用两个参数并直接在页面上导航时,数据获取没有发生

我收到Uncaught TypeError: props.handleSelect is not a function

改变输入的默认值时出现问题:number react-hook-form

条件渲染元素的测试不起作用

从服务器获取数据时未定义,错误非法调用

基于标记名的博客详细信息分组没有发生

如何避免在 react useEffect 上滚动时出现小的延迟?

setState 改变对象引用

React Router v6 - 访问嵌套路由和处理手写 url 的正确方法

Storybook - 无法解析generated-stories-entry.cjs/字段browser不包含有效的别名配置

如何在react 日历中自定义带有圆形边框的日期项?

哪个是创建 React 应用程序的更好方法?

RTK 查询 POST 方法不会改变数据