Reactjs - Daten vom Server erhalten und Aktualisierung

Question

(reactjs hier Neuling) ...

I Reactjs bin mit einer Seite zu erstellen, wo ich

• ein einfaches Suchfeld
• Benutzertypen haben in einem Suchtext
• Daten vom Server geholt und

Jetzt angezeigt, der „search~~POS=TRUNC“ und „Daten“ sind meine Staaten und ich versuche herauszufinden, wie man die "Ergebnisse" erst aktualisiert, nachdem die Daten vom Server empfangen wurden.

Ich habe ein Ereignis, wo ich, wenn Benutzer tippt etwas als Suchtext

handleUserInput: function(searchText) { 
     this.loadDataFromServer(searchText); 

     this.setState({ 
     searchText: searchText, 
     }); 
    }, 

Aber mit der vorstehenden Funktion, das folgende geschieht

1. Erste Daten handhaben ist
2. Benutzer geladen Typen in etwas

3. Das Ergebnis wird SOFORT aktualisiert, um nur das Ergebnis anzuzeigen, das den Suchtext enthält (Code unten) , ABER gleichzeitig wird eine Anforderung an den Server gestellt, Ergebnisse abzurufen, bei denen das Ergebnis den Suchtext enthält

   this.props.products.forEach (Funktion (Produkt)) { if (product.name.toLowerCase() .indexOf (this.props.searchText)> -1) { row = rows.push (Zeile) } } .bind (this));

4. Nach etwa einer Sekunde werden neue Daten vom Server empfangen und das Ergebnis wird erneut aktualisiert.

Offensichtlich, was ich tun möchte, ist

1. laden Anfangsdaten
2. Typen Anwendertext
3. anfordern Daten vom Server
4. Daten vom Server
5. aktualisieren Erhalten Sie suchen die Ergebnisse

Was ist der richtige Weg, um dies zu erreichen?

Answer 1

Also, es ist nur die erste Aktualisierung, die Sie richtig stoppen möchten?

Wenn es bereits aktualisiert wird, sobald die Ergebnisse vom Server kommen, scheint es, dass Sie die Ergebnisse auf dem Client in Schritt 3 nicht filtern müssen - dann wird das gleiche virtuelle DOM erzeugt wie an erster Stelle Daher aktualisiert die Ergebnisliste nur das tatsächliche DOM, sobald der Server antwortet.

Answer 2

Denke nicht, dass searchText selbst ein Zustand sein sollte. Sie können einfach die vom Server abgerufenen Daten verwenden, um den Status festzulegen.

Nehmen wir an, data ist eine Zustandseigenschaft. Sie könnten einen Callback an den loadDataFromServer übergeben und loadDataFromServer ruft diesen Callback auf, sobald die Daten auf onsuccess abgerufen wurden.

Auf diese Weise wird die Komponente neu gerendert und zeigt die Ergebnisse, sobald die Daten aktualisiert werden.