Lodash debounce avec React Input

Question

J'essaye d'ajouter debouncing avec lodash à une fonction de recherche, appelée d'un événement onChange d'entrée. Le code ci-dessous génère une erreur de type 'function is expected', ce que je comprends parce que lodash attend une fonction. Quelle est la bonne façon de faire cela et peut-elle être faite en ligne? J'ai essayé presque tous les exemples jusqu'ici sur SO en vain.

search(e){ 
let str = e.target.value; 
debounce(this.props.relay.setVariables({ query: str }), 500); 
}, 

Answer 1

La fonction anti-rebond peut être passé en ligne dans le JSX ou mis directement en tant que méthode de classe comme on le voit ici:

search: _.debounce(function(e) { 
    console.log('Debounced Event:', e); 
}, 1000) 

Fiddle:https://jsfiddle.net/woodenconsulting/69z2wepo/36453/

Si vous utilisez es2015 + vous pouvez définir votre méthode anti-rebond soit dans votre constructor ou dans componentWillMount.

Exemple:

componentWillMount() { 
    this.search = _.debounce(e => { 
    console.log('Debounced Event:', e); 
    }, 1000); 
} 

Answer 2

Ce n'est pas si simple question

D'une part travailler juste erreur autour de vous obtenez, vous devez conclure vous setVariables dans la fonction:

search(e){ 
    let str = e.target.value; 
    _.debounce(() => this.props.relay.setVariables({ query: str }), 500); 
} 

D'autre part, Je crois que la logique anti-rebond doit être encapsulée dans Relay.