Reactjs - Ottenere dati dal server e l'aggiornamento

Question

(reactjs newbie qui) ...

sto usando Reactjs per creare una pagina in cui ho

• una semplice casella di ricerca
• tipi di utente in un testo di ricerca
• dati vengono recuperati dal server e viene visualizzata

Ora, il "testo di ricerca" e "dati" sono i miei stati e sto cercando di capire come aggiornare i "risultati" solo dopo che i dati sono stati ricevuti dal server.

Ho un evento in cui mi occupo ogni volta utente digita qualcosa come un testo di ricerca

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

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

Ma con la funzione di cui sopra, la seguente cosa accade

1. dati iniziale viene caricato
2. utente digita qualcosa in

3. Il risultato è IMMEDIATAMENTE aggiornato per mostrare solo il risultato che contiene il testo di ricerca (codice seguente) , Ma allo stesso tempo viene effettuata una richiesta al server per recuperare i risultati in cui il risultato contiene il testo di ricerca

   this.props.products.forEach (function() {prodotto se (product.name.toLowerCase() .indexOf (this.props.searchText)> -1) { row = rows.push (row) } } .bind (this));

4. Dopo circa un secondo, vengono ricevuti nuovi dati dal server e il risultato viene nuovamente aggiornato.

Ovviamente quello che voglio fare è

1. caricare i dati iniziali
2. tipi utente Ricerca testo
3. i dati richiesti al server
4. ricevere i dati dal server di
5. Aggiornamento i risultati

Qual è il modo corretto per raggiungere questo obiettivo?

Answer 1

Quindi, è solo il primo aggiornamento che vuoi interrompere?

Se è già aggiornato una volta che i risultati provengono dal server, sembra che tutto ciò che dovete fare non sia filtrare i risultati sul client al punto 3 - allora lo stesso DOM virtuale verrà generato come in primo luogo , quindi l'elenco dei risultati aggiornerà solo il DOM effettivo dopo che il server ha risposto.

Answer 2

Non pensare che searchText debba essere uno stato. Potresti semplicemente usare i dati recuperati dal server per impostare lo stato.

Diciamo che data è una proprietà di stato. è possibile passare una richiamata a loadDataFromServer e loadDataFromServer chiama questa richiamata una volta che i dati vengono recuperati su di esso è onsuccess.

this.loadDataFromServer(searchText, function(data) { 
    this.setState({data: data}}; 
}); 

In questo modo, il componente eseguirà il rerender e mostrerà i risultati una volta aggiornati i dati.