So stellen Sie sicher, dass die Antwort im Speicher zur letzten Anfrage bei React/Flux gehört

Question

Ich habe ein Eingabefeld, das ich zur Überprüfung mit onChange überprüfe. Auf dem Change-Event feuere ich eine Aktion aus, zB: MyActions.checkUsername(), damit ich gleichzeitig sehe, ob der Benutzername bereits vergeben ist.

Das Problem ist, wenn ich den Speicher überprüfen, um die Antwort für die Validierung zu sehen, bekomme ich den Antwortwert der vorherigen Anfrage. Weil es asynchron ist.

Was ist also der ideale Weg zur Lösung dieses Problems in React with Flux?

Answer 1

Eine Technik, die helfen könnte, das Problem zu lindern, könnte die debounce Methode von lodash sein, so dass Sie die Prüfung nicht spammen.

Im groben Beispiel unten ich die debounce von lodash, so dass der Asynchron-Check wird nur Feuer nach 500ms der Ruhe verwenden (das heißt, nachdem der Benutzer aufhört, für 500 ms eingeben).

Zum Beispiel:

import { debounce } from 'lodash'; 

class MyComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.checkUser = debounce(this.checkUser.bind(this), 500 /*ms*/); 
    } 

    checkUser(value) { 
    // fire async check 
    } 

    render() { 
    return (
     <form> 
     <input onChange={this.checkUser} /> 
     </form> 
    );  
    } 
} 

Dies kann das Problem nicht vollständig lindern, aber probieren Sie es aus. Sie könnten versuchen, die Entprellzeit zu verlängern, bevor Sie sich für eine kompliziertere Lösung entscheiden.

---

Wenn Sie lodash nicht als Abhängigkeit hinzufügen möchten, könnten Sie Ihre eigene Entprellung schreiben. Hier ein Beispiel:

https://davidwalsh.name/javascript-debounce-function