Question

我有一个搜索输入，可以动态进行API调用。我想实施去抖动以减少服务器调用量。

typedef struct { ... } BAZ;

class Foo {
  public:
    Foo(BAZ a) { ... }
};

class Bar {
  private:
    Foo foo1;
    Foo foo2;

  public:
    Bar(BAZ a, BAZ b) : foo1(a), foo2(b) { ... }
};

我期待每1秒钟_debouncedSearch() { debounce(this.props.fetchRoutes(this.state.searchText), 1000); } _updateResults(searchText) { this.setState({searchText}); this._debouncedSearch(); }。但它仍然在飞行中被召唤。抛出错误：

未捕获的TypeError：预期的函数       在辩论时（lodash.js？3387：10334）

未捕获错误：抛出了跨源错误。 React无法访问开发中的实际错误对象。

我觉得这个问题必须经常被问到，但解决方案似乎都不适合我。有人可以向我解释一下究竟是什么问题吗？我认为debounce只是一个setTimeOut。

由于

Answer 1

constructor(props) {
    super(props);
    this.state = {
      searchText: '',
    };
    this._debouncedSearch = debounce(
      () => this.props.fetchRoutes(this.state.searchText),
      1000
    );
  }

  _updateResults(searchText) {
    this.setState({searchText});
    this._debouncedSearch();
  }

如果有人需要，这是完整的代码！

Answer 2

_.debounce已经是一个执行函数（函数返回函数）。那么_debouncedSearch应该是类的属性，而不是方法：

  _debouncedSearch=  debounce(() => this.props.fetchRoutes(this.state.searchText), 1000);

而不是：

  _debouncedSearch() {
    debounce(this.props.fetchRoutes(this.state.searchText), 1000);
  }

另外，请注意，_.debounce的第一个参数是函数（() => this.props.fetchRoutes...），而不是直接this.props.fetchRoutes...

使用debounce进行反应中的搜索输入

2 个答案: