Come posso garantire che uno stato reactjs sia aggiornato e quindi chiamare una funzione?

Question

Sto provando a utilizzare reactjs per aggiornare uno stato e, una volta aggiornato, attiva una chiamata ajax che richiede una nuova pagina. Poco prima che venga attivata la chiamata ajax, viene impostata una variabile di offset: var offset = this.state.npp * this.state.page; Tuttavia, dopo l'attivazione di clickNextPage(), il valore di this.state.page non viene aggiornato.

Fondamentalmente non capisco cosa sta succedendo qui, questa sembra essere una condizione di competizione, perché guardo il cambiamento di stato sulla mia funzione render() con {this.state.page}.

Come posso essere sicuro che la mia this.state.page sia stata aggiornata, quindi lanciare findByName()?

clickNextPage: function(event){ 
    console.log("clicked happend") 
    page = this.state.page; 
    console.log(page) 
    page += 1 
    console.log(page) 
    this.setState({page: page}); 
    console.log(this.state.page) 
    this.findByName() 
    }, 

JS Console:

clicked happend 
0 
1 
0 

Answer 1

setState è asincrono in quanto this.state non verranno aggiornati subito. La risposta breve al tuo problema è usare il callback (il secondo parametro a setState) che viene richiamato dopo che lo stato interno è stato aggiornato. Per esempio

this.setState({page: page}, function stateUpdateComplete() { 
    console.log(this.state.page) 
    this.findByName(); 
}.bind(this)); 

La risposta è più che dopo aver chiamato setState, tre funzioni sono chiamate (vedi qui per maggiori dettagli su ogni https://facebook.github.io/react/docs/component-specs.html):

• shouldComponentUpdate questo consente di ispezionare la precedente e la nuova stato per determinare se il componente deve aggiornarsi. Se si restituisce falso, le seguenti funzioni sono non eseguito (anche se il this.state sarà ancora aggiornato entro il componente)
• componentWillUpdate questo ti dà la possibilità di eseguire alcun codice prima che il nuovo stato è impostato internamente e rendering accade
• render ciò avviene tra le funzioni "will" e "did" del componente.
• componentDidUpdate questo ti dà la possibilità di eseguire qualsiasi codice dopo il nuovo stato è impostato e il componente è ri-renderizzati in sé

Answer 2

Quando si chiama this.setState il nuovo stato non è impostato direttamente, Reagire lo mette in uno stato di attesa, che chiamando this.state può restituire il vecchio stato.

Questo perché React potrebbe eseguire il batch degli aggiornamenti di stato e pertanto non garantisce che this.setState sia sincrono.

Che cosa si vuole fare è chiamato this.findByName() all'interno componentDidUpdate, componentWillUpdate o attraverso il callback offerto come secondo argomento di this.setState a seconda del caso d'uso. Si noti che la richiamata su this.setState non verrà attivata fino a quando la chiamata non sarà passata e il componente non avrà eseguito nuovamente il rendering.

Inoltre nel tuo caso potresti passare una funzione da this.setState invece di fare una danza variabile per aumentare la leggibilità.

this.setState(function (prevState, currentProps) { 
    return {page: prevState.page + 1} 
}, this.findByName);