2017-12-14 37 views
4

es wäre am besten, zuerst an meinem Code suchen:Lodash debounce nicht in Arbeit Reagieren

import React, { Component } from 'react'; 
import _ from 'lodash'; 
import Services from 'Services'; // Webservice calls 

export default class componentName extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     value: this.props.value || null 
    } 
    } 

    onChange(value) { 
    this.setState({ value }); 

    // This doesn't call Services.setValue at all 
    _.debounce(() => Services.setValue(value), 1000); 
    } 

    render() { 
    return (
     <div> 
     <input 
      onChange={(event, value) => this.onChange(value)} 
      value={this.state.value} 
     /> 
     </div> 
    ) 
    } 
} 

nur eine einfache Eingabe. Im Contructor ergreift es value von den Requisiten (falls verfügbar), um einen lokalen Zustand für die Komponente festzulegen.

Dann in der onChange Funktion der input ich den Status aktualisieren und dann versuchen, den Webservice-Endpunkt aufzurufen, um den neuen Wert mit Services.setValue() zu setzen.

Was funktioniert ist, wenn ich die debounce direkt durch die onChange des Eingangs wie so gesetzt:

<input 
    value={this.state.value} 
    onChange={_.debounce((event, value) => this.onChange(value), 1000)} 
/> 

Aber dann wird this.setState nur alle 1000 Millisekunden und aktualisieren Sie die Ansicht genannt. Wenn du ein Textfeld eingibst, sieht das komisch aus, denn was du eingegeben hast, erscheint nur eine Sekunde später.

Was mache ich in einer solchen Situation?

Antwort

2

Das Problem tritt auf, weil Sie die Entprellfunktion nicht nennend, Sie auf folgende Weise

export default class componentName extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     value: this.props.value || null 
    } 
    this.servicesValue = _.debounce(this.servicesValue, 1000); 
    } 

    onChange(value) { 
    this.setState({ value }); 

    // This doesn't call Services.setValue at all 
    this.servicesValue(value); 
    } 
    servicesValue = (value) => { 
     Services.setValue(value) 
    } 
    render() { 
    return (
     <div> 
     <input 
      onChange={(event, value) => this.onChange(value)} 
      value={this.state.value} 
     /> 
     </div> 
    ) 
    } 
} 
+0

Ich sehe tun könnte! Ich könnte auch einfach _.debounce (...) in eine selbst-ausführende anonyme Funktion in 'onChange' richtig einpacken? – Tiwaz89

+1

ja, das könntest du auch, aber in diesem Fall würdest du jedes Mal eine neue entprellte Funktion zurückgeben, also ist der obige Ansatz besser als das, was du vorschlägst –

+0

Toller Punkt, danke! – Tiwaz89