javascript - 去抖动不适用于 React-Redux 应用程序

Question

我正在构建一个在按键时执行 API 请求的函数，但我希望它能够消除抖动。

这目前不起作用并会产生错误:lodash.js:10319 Uncaught TypeError: Expected a function

这是一个带有控制台日志而不是异步请求的代码片段，这也不起作用!

import React from 'react';
const _ = require('lodash');

const method = () => {
    return _.debounce(testFunc(), 3000);
};

const testFunc = () => {
    console.log('echo echo test test');
};


const SearchBox = ({ onTypingSearch, searchTerm }) => (
    <form>
        <p>Search: {searchTerm}</p>
        <input
            onChange={(e) => {
                console.log(e.target.value);                
                onTypingSearch(e.target.value);
                console.log(method);
                method();
            }}
                value={searchTerm}
        />
  </form>
);

export default SearchBox;

Answer 1

您必须对函数进行反跳，而不是调用它的结果:

这个:

const method = () => {
    return _.debounce(testFunc(), 3000);
};

对此:

const method = () => {
    return _.debounce(testFunc, 3000);
};

更新:

按照您设置的方式，method 返回一个去抖函数。因此调用 method() 将返回一个函数。然后你必须调用它:method()()。

最好这样做:

const method = _.debounce(() => {
    return testFunc();
}, 3000);

如果你想要参数:

const method = _.debounce((e) => {
    return testFunc(e);
}, 3000);

然后，您可以继续按照当前的方式调用:method()。