Javascript React input debounce仍在执行方法

我正在尝试实现debounce，但无法使其工作（对于每个输入更改仍然有太多的请求）。我正在使用

下划线

中的

去盎司

方法。我简化了本例的代码：

import { debounce } from "underscore";

const fetch = (value) => {
    axios.post("/uri", { search: value }).then(({ data }) => {   
      setBreeds(data);
    });
  };

<input
  type="text"
  onChange={e => debounce(fetch(e.target.value), 2000)}
  autoComplete="off"
/>

从“下划线”导入{debounce}；
常量获取=（值）=>{
post（“/uri”，{search:value}）。然后（{data}）=>{
立根簧片（数据）；
});
};
去盎司（fetch（e.target.value），2000）}
自动完成=“关闭”
/>

---

我在这里做错了什么？

您的基本问题是需要函数作为其第一个参数。您正在传递

fetch（e.target.value）

作为第一个参数，它甚至不是一个函数（它是一个承诺）。但是为了评估该参数是什么，每次

onChange

事件发生时都必须调用

fetch

，这就是为什么调用它太频繁的原因

“正确”的书写方式是：

onChange={debounce(e => fetch(e.target.value), 2000)}

然而，即使这样也不会像预期的那样工作，因为每次组件重新加载时都必须重新计算

onChange

函数-因此，尽管内部

debounce

会拒绝调用其基础函数，直到上次加载后2秒后，该函数将在重新加载之间更改标识，即使它对你来说是“相同的功能”。仅仅因为两个函数具有相同的实现和效果并不意味着它们是相同的函数引用

---

因此，您需要提取函数

e=>fetch（e.target.value）

，使其具有单个标识。如何在函数组件中实现这一点并不明显（在类中很容易，只需将函数作为实例方法-我假设这是一个函数组件，尽管是通过使用名为

setBreeds

）的函数实现的），但可以通过

useRef

或

useCallback

-例如，参见文章，以及React站点上这两个钩子的文档。

您的基本问题是需要函数作为其第一个参数。您正在传递

fetch（e.target.value）

作为第一个参数，它甚至不是一个函数（它是一个承诺）。但是为了评估该参数是什么，每次

onChange

事件发生时都必须调用

fetch

，这就是为什么调用它太频繁的原因

“正确”的书写方式是：

onChange={debounce(e => fetch(e.target.value), 2000)}

然而，即使这样也不会像预期的那样工作，因为每次组件重新加载时都必须重新计算

onChange

函数-因此，尽管内部

debounce

会拒绝调用其基础函数，直到上次加载后2秒后，该函数将在重新加载之间更改标识，即使它对你来说是“相同的功能”。仅仅因为两个函数具有相同的实现和效果并不意味着它们是相同的函数引用

因此，您需要提取函数

e=>fetch（e.target.value）

，使其具有单个标识。如何在函数组件中实现这一点并不明显（在类中很容易，只需将函数作为实例方法-我假设这是一个函数组件，尽管是通过使用名为

setBreeds

）的函数实现的），但可以通过

useRef

或

useCallback

-例如，参见文章，以及React站点上这两个钩子的文档。

根据，debounce（）需要有一个函数作为第一个参数，而（在我看来）您发送的是函数调用的结果。也许：

onChange={e => debounce(fetch(e.target.value), 2000)}

可更改为：

onChange={e => debounce(() => fetch(e.target.value), 2000)}

根据，debounce（）需要有一个函数作为第一个参数，而（在我看来）您正在发送函数调用的结果。也许：

onChange={e => debounce(fetch(e.target.value), 2000)}

可更改为：

onChange={e => debounce(() => fetch(e.target.value), 2000)}

---

尝试创建一个去BounceCall函数并使用e.persist

 const debounceCall = debounce(e => {
    axios.post("/uri", { search: e.target.value }).then(({ data }) => {
       setBreeds(data);
    });
 }, 2000);

  <input
    type="text"
    name="inp"
    onChange={e => {
      e.persist();
      debounceCall(e);
    }}
    autoComplete="off"
  />

const debounceCall=debounce（e=>{
post（“/uri”，{search:e.target.value}）。然后（{data}）=>{
立根簧片（数据）；
});
}, 2000);
{
e、 坚持（）；
debounceCall（e）；
}}
自动完成=“关闭”
/>

尝试创建一个去BounceCall函数并使用e.persist

 const debounceCall = debounce(e => {
    axios.post("/uri", { search: e.target.value }).then(({ data }) => {
       setBreeds(data);
    });
 }, 2000);

  <input
    type="text"
    name="inp"
    onChange={e => {
      e.persist();
      debounceCall(e);
    }}
    autoComplete="off"
  />

const debounceCall=debounce（e=>{
post（“/uri”，{search:e.target.value}）。然后（{data}）=>{
立根簧片（数据）；
});
}, 2000);
{
e、 坚持（）；
debounceCall（e）；
}}
自动完成=“关闭”
/>