反応内の検索入力にdebounceを使用する

Question

私は、その場でAPI呼び出しを行うための検索入力を持っています。私はサーバコールの量を減らすためにデバウンスを実装したいと思います。

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

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

私はdebouncedSearchを1秒ごとに期待しています。しかしそれはまだオンザフライで呼ばれています。エラーを投げる：

Uncaught TypeError: Expected a function at debounce (lodash.js?3387:10334)

Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development.

私はこの質問がたくさんの周りに尋ねられる必要がありますが、解決策のどれも私のために働かないように感じるように感じます。誰かが私にここでの問題がどういうものなのかを説明できましたか？私はデバウンスが単なるsetTimeOutだと思った。

おかげ

Answer 1

_.debounceはすでに行わ機能（関数が返す関数）です。

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

代わりに：次に_debouncedSearchは、クラスの属性、およびない方法であるべきである

また

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

、通知、_.debounceの最初の引数は、関数（() => this.props.fetchRoutes...）、直接ではなくなるthis.props.fetchRoutes...

Answer 2

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

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

誰かが必要とする場合の完全なコードは次のとおりです。