/ / This.setState () di react.js è sincrono o asincrono? - javascript, reactjs

This.setState () di react.js è sincrono o asincrono? - javascript, reactjs

Si prega di guardare nel seguente codice. Ho provato a chiamare setState uno sotto l'altro. Sembra count che viene restituito dalla seconda chiamata di setState è sempre impostato su this.state.count. Qui, è sempre assegnato con 3

    class Counter extends React.Component {
constructor(props){
super(props);
this.handleReset = this.handleReset.bind(this);
this.state = {
count : 0
};
}

handleReset() {
this.setState(() => {
return {
count: 1
}
});
this.setState(() => {
return {
count: 3
}
});
}
render() {
return (
<div>
<h1>Count:{this.state.count}</h1>
<button onClick={this.handleReset}>reset</button>
</div>
);
}
}
ReactDOM.render(<Counter />, document.getElementById("app"));

risposte:

1 per risposta № 1

Secondo i documenti di React, può essere asincrono.

React può eseguire il batch di più chiamate setState () in aaggiornamento singolo per le prestazioni. Poiché this.props e this.state potrebbero essere aggiornati in modo asincrono, non dovresti fare affidamento sui loro valori per calcolare lo stato successivo

(fonte originale e esempio di codice corretto)


0 per risposta № 2

setState è asincrono. È possibile passare il callback come secondo argomento e vedere lo stato aggiornato.

this.setState({ count: 5 }, () => {
console.log(this.state.count) // 5
})