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

Question

我正在构建一个在按键上执行 API 请求的函数，但我希望它去抖动。

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

这是一个带有控制台日志而不是异步请求的代码 sn-p，它也不起作用！

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);

如果你想要 args：

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

然后，您可以继续按照您当前的方式拨打电话：method()。