2015-02-27 25 views
6

ho il seguente codice:Fai qualcosa una volta, poi ogni 15 secondi in reagiscono js

var Panel = React.createClass({ 

    getInitialState: function() { 
    return { 
     user_id: null, 
     blogs: null, 
     error: false, 
     error_code: '', 
     error_code: '' 
    }; 
    }, 

    shouldComponentUpdate: function(nextProps, nextState) { 
    if (nextState.error !== this.state.error || 
     nextState.blogs !== this.state.blogs || 
     nextState.error_code !== this.state.error_code 
    ) { 
     return true; 
    } 
    }, 

    componentDidMount: function() { 
    var self = this; 
    var pollingInterval = setInterval(function() { 
     $.get(self.props.source, function(result) { 
     if (self.isMounted()) { 
      self.setState({ 
      error: false, 
      error_code: '', 
      error_message: '', 
      blogs: result.user.blogs, 
      user_id: result.user.id 
      }); 
     } 
     }.bind(self)).fail(function(response) { 
     self.setState({ 
      error: true, 
      error_code: response.status, 
      error_message: response.statusText 
     }); 
     }.bind(self)); 
    }, 1000); 
    }, 

    render: function() { ... } 

}); 

La parte importante mettere a fuoco è il componentDidMount Ciò recuperare ogni secondo, a prescindere se si verifica un errore o no . La funzione di rendering, supponendo che vi sia un errore, mostrerà il metodo appropriato. Quindi, per tutto ciò che è intenso e lo scopo, questo codice fa esattamente ciò che voglio che faccia, ma se fallisce, recupera fino a quando non riesce.

Ma ho bisogno di apportare alcune modifiche, ed è qui che mi sono perso. Voglio dire: Recupera una volta, passa o fallisce - non importa. POI ogni 15 secondi dopo il recupero iniziale, riprovare - indipendentemente dal pass o fail

Normalmente eseguirò una raccolta backbone e un router insieme a un helper del sondaggio per fare tutto questo, ma in questo caso specifico non c'è bisogno di extra in testa. Quindi sono qui perplesso. Come ottengo ciò che sto cercando di ottenere?

+0

Non potete basta aggiungere un metodo che dopo il montaggio, viene chiamato ogni 15 secondi? Sposta semplicemente il codice che hai nel corpo di 'setInterval' in una funzione, e nel componenteDidMount, avvialo. E ripetere. Volete controllare 'isMounted()' potenzialmente. – WiredPrairie

+0

Ci stavo pensando, ma non sapevo se avrebbe funzionato perché credo che componentDidMount venga chiamato una sola volta dopo il rendering? a meno che non sia una testa di crack? – TheWebs

+0

(Non sono sicuro delle abitudini della droga ... :-)). Sì, 'componentDidMount' viene eseguito solo una volta: http://facebook.github.io/react/docs/component-specs.html. Quindi, potresti avviarlo lì. Si vorrebbe disabilitare il timer quando il componente è smontato. – WiredPrairie

risposta

12

Si dovrebbe essere in grado di refactoring solo il codice un po 'per essere in grado di chiamare la funzione polling alcuni modi diversi (come manualmente ad esempio, e poi a un intervallo specificato):

componentDidMount: function() { 
    this.startPolling(); 
}, 

componentWillUnmount: function() { 
    if (this._timer) { 
     clearInterval(this._timer); 
     this._timer = null; 
    } 
}, 

startPolling: function() { 
    var self = this; 
    setTimeout(function() { 
     if (!self.isMounted()) { return; } // abandon 
     self.poll(); // do it once and then start it up ... 
     self._timer = setInterval(self.poll.bind(self), 15000); 
    }, 1000); 
}, 

poll: function() { 
    var self = this; 
    $.get(self.props.source, function(result) { 
     if (self.isMounted()) { 
     self.setState({ 
      error: false, 
      error_code: '', 
      error_message: '', 
      blogs: result.user.blogs, 
      user_id: result.user.id 
     }); 
     } 
    }).fail(function(response) { 
     self.setState({ 
     error: true, 
     error_code: response.status, 
     error_message: response.statusText 
     }); 
    }); 
} 
+0

questo ha senso, grazie. – TheWebs

+0

Questa risposta non è più aggiornata, dato che 'isMounted' è ora sottocosto:' Warning: isMounted (...) è deprecato nelle classi JavaScript React. Invece, assicurarsi di pulire le sottoscrizioni e le richieste in sospeso in componentWillUnmount per evitare perdite di memoria –

Problemi correlati