Tengo una función onChange en este elemento:

 <TextField id="rowinput" type="number" defaultValue={this.defaultRows} // defaultrRows = 1 inputProps={{ min: "1", max:"5"}} onChange={this.handleRows}> </TextField>

Esta es la función:

 handleRows = ev => { let newrows = ev.target.value; let newcount = newrows * this.state.cols; this.setState( {rows: newrows, panelcount: newcount} ) console.log("Row Count: " + this.state.rows); console.log("Total Count: " + this.state.panelcount); }

Lo que esto debería hacer es tomar el valor del campo de entrada cuando se hace clic en las flechas hacia arriba y hacia abajo y actualizar el estado. Sin embargo, descubrí que cuando la declaración de la consola en el controlador imprime su resultado, el número utilizado está un paso por detrás.

Como puede ver, en la carga de la página, comienza con un valor predeterminado de 1 (al igual que el valor de cols al que hace referencia), por lo que cuando se hace clic en la flecha hacia arriba, el valor cambia a 2 y debería imprimirse:

Recuento de filas: 2

Recuento Total: 2

Cuando imprimo las variables temporales, imprime 2 y 2, pero cuando uso la llamada de estado aquí, imprime 1 y 1. Aquí, por ejemplo, aumenté el valor hasta 5, y puede ver que la consola nunca registró más de 4 :

¿La actualización de estado se llama de forma asíncrona? ¿Cómo pueden ser correctas las variables temporales pero llamar a this.state.rows está una iteración atrás?

Cualquier ayuda sería muy apreciada