Automatisches Speichern in Datenbank nach Timeout

Question

Ich möchte Autosave ausführen, wenn ein Benutzer ein Formular in einer React-Komponente ausfüllt. Der Ajax-Anruf sollte ausgelöst werden, wenn 3 Sekunden seit dem letzten onChange Ereignis vergangen sind.

Mein Code unten ist inspiriert von , die zeigt, wie dies mit setTimeout und clearTimeout zu erreichen. Aber ich mache etwas falsch in meiner React-Implementierung - die Verzögerung von 3 Sekunden wird beim Tippen nicht respektiert.

Irgendwelche Ideen, was hier falsch? Oder ist mein Denken alle zusammen falsch darüber, wie man das löst?

class Form extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     isSaved: false 
    }; 
    this.handleUserInput = this.handleUserInput.bind(this); 
    this.saveToDatabase = this.saveToDatabase.bind(this); 
    } 
    saveToDatabase() { 
    var timeoutId; 
    this.setState({isSaved: false}); 
    if (timeoutId) { 
     clearTimeout(timeoutId) 
    }; 
    timeoutId = setTimeout(() => { 
     // Make ajax call to save data. 
     this.setState({isSaved: true}); 
    }, 3000); 
    } 
    handleUserInput(e) { 
    const name = e.target.name; 
    const value = e.target.value; 
    this.setState({[name]: value}); 
    this.saveToDatabase(); 
    } 
render() { 
    return (
    <div> 
     {this.state.isSaved ? 'Saved' : 'Not saved'} 
     // My form. 
    </div> 
) 
} 

Answer 1

Innen saveToDatabase Methode Sie definieren einen neuen und undefinedtimeoutId Variable die Methode jedes Mal aufgerufen wird. Deshalb wird die if Anweisung nie aufgerufen.

Stattdessen müssen Sie Spielraum, die Variable und erstellen Sie im Konstruktor eine Klasse Daten Eigenschaft.

constructor() { 
    super(); 
    this.state = { 
    isSaved: false 
    }; 
    this.timeoutId = null; 
    this.handleUserInput = this.handleUserInput.bind(this); 
    this.saveToDatabase = this.saveToDatabase.bind(this); 
} 

saveToDatabase() { 
    this.setState({isSaved: false}); 
    if (this.timeoutId) { 
    clearTimeout(this.timeoutId) 
    }; 
    this.timeoutId = setTimeout(() => { 
    // Make ajax call to save data. 
    this.setState({isSaved: true}); 
    }, 3000); 
}