React输入反跳仍然执行方法

问题描述

我正在尝试实现防抖功能，但无法使其工作（每次输入更改仍然有太多请求）。我正在使用const users = { Alex: { email: 'alex@alex.com',skills: ['HTML','CSS','JavaScript'],age: 20,isLoggedIn: false,points: 30 },Asab: { email: 'asab@asab.com','JavaScript','Redux','MongoDB','Express','React','Node'],age: 25,points: 50 },brook: { email: 'daniel@daniel.com','Redux'],age: 30,isLoggedIn: true,Daniel: { email: 'daniel@alex.com','Python'],points: 40 },John: { email: 'john@john.com','Node.js'],Thomas: { email: 'thomas@thomas.com','React'],Paul: { email: 'paul@paul.com',points: 40 } }中的debounce方法。我已为该示例简化了代码：

underscore

我在这里怎么可能做错了？

解决方法

您的基本问题是debounce需要一个函数作为其第一个参数。您将传递fetch(e.target.value)作为第一个参数，它甚至不是一个函数（它是undefined）。但是为了评估undefined的参数，每次fetch事件发生时都必须调用onChange-这就是为什么您经常看到它被调用的原因。

写此代码的“正确”方法是：

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

然而，即使那样也无法按预期工作，这仅仅是因为onChange函数每次组件重新发布时都必须重新计算-因此尽管debounce在内部将拒绝调用其基础函数，直到2秒后自上次通过以来，该功能将改变重投者之间的身份，即使就您而言，它是“相同的功能”。仅仅因为两个函数具有相同的作用和效果并不意味着它们是相同的函数引用。

因此，您需要提取函数e => fetch(e.target.value)，使其具有单个标识。这在函数组件中如何实现尚不是很明显（在类中很容易，只需将函数设置为实例方法-尽管通过使用名为setBreeds的函数，我认为这是一个函数组件），但是可以通过useRef或useCallback来完成-例如，请参见this文章，以及React网站上这两个Hook的文档。

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

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

可以更改为：

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

尝试创建一个debounceCall函数并使用 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"
  />

debounce javascript reactjs reactjs reactjs reactjs