React JS: setState è in ritardo all'ultimo input

Question

Mi dispiace, se non riesco a spiegare correttamente il mio problema perché l'inglese non è la mia lingua principale .

creo un componente modulo (scritto in ES6) qualcosa di simile:

class Form extends React.Component { 
    constructor(...args) { 
    super(args); 
    this.state = { input: '' }; 
    } 

    render() { 
    return (
     <form> 
     <input 
      type="text" 
      onChange={this.onInputChange.bind(this)} 
     /> 
     </form> 
    ); 
    } 

    onInputChange(e) { 
    this.setState({ input: e.target.value }); 
    console.log(`state: ${this.state}, value: ${e.target.value}`); // this is my checking 
    } 
} 

Vedete la linea dove faccio console.log? Ora, quando provo a digitare qualcosa sul browser:

// I type this: my word 
// on every character input, the output is: 

// state: , value: m 
// state: m, value: my 
// state: my, value: my 
// state: my , value: my w 
// state: my w, value: my wo 
// state: my wo, value: my wor 
// state: my wor, value: my word 

// I do backspace 
// state: my word, value: my wor 
// state: my wor, value: my wo 
// state: my wo, value: my w 
// state: my w, value: my 
// state: my , value: my 
// state: my, value: m 
// state: m, value: 

Vedi? Lo stato è in ritardo di un carattere per ogni input. Questo non va bene per convalida della lunghezza di input. Cosa ho fatto di sbagliato lì? Oppure, mi sono perso lo qualcosa?

Answer 1

Utilizzare una richiamata sul metodo setState.

onInputChange(e) { 
    this.setState({ input: e.target.value },() => { 
     console.log(`state: ${this.state}, value: ${e.target.value}`); 
    }); 
} 

Dal docs:

Il secondo parametro (opzionale) è una funzione di richiamata che viene eseguita una volta setState è completato e il componente viene nuovamente reso.

Answer 2

setState non mutare immediatamente this.state., È possibile passare a setState callback come secondo argomento e ottenere lo stato aggiornato

onInputChange(e) { 
    this.setState({ input: e.target.value },() => { 
    console.log(`state: ${this.state}, value: ${e.target.value}`); // this is my checking 
    }); 
} 

Example

Answer 3

Questo è accaduto perché console.log ha iniziato anche prima di questo .setState ha completato la sua azione. È necessario passare console.log in un callback per assicurarsi che questo venga chiamato solo al termine di this.setState.

onInputChange(e) { 
    this.setState({ input: e.target.value },() => { 
    console.log(`state: ${this.state}, value: ${e.target.value}`); // the console message code 
    }); 
}