¿Por qué llamar al método setState no muta el estado inmediatamente?

Solución:

La razón es setState es asincrónico, no puedes esperar la actualización state valor justo después del setState, si desea verificar el valor, use un callback método. Pase un método como devolución de llamada que se ejecutará después de la setState completar su tarea.

¿Por qué setState es asincrónico?

Esto es porque setState altera el state y provoca que se vuelva a renderizar. Esta puede ser una operación costosa y synchronous podría dejar el navegador sin responder. Por lo tanto, la setState las llamadas son asynchronous así como por lotes para una mejor experiencia y rendimiento de la interfaz de usuario.

De Doc:

setState () no muta inmediatamente this.state pero crea una transición de estado pendiente. Acceder a this.state después de llamar a este método puede devolver potencialmente el valor existente. No hay garantía de funcionamiento sincrónico de llamadas a setState y las llamadas se pueden agrupar para mejorar el rendimiento.

Usando el método de devolución de llamada con setState:

Para comprobar la actualización state valor justo después del setState, use un método de devolución de llamada como este:

setState({ key: value }, () => {
     console.log('updated state value', this.state.key)
})

Mira esto:

class NightlifeTypes extends React.Component {
   constructor(props) {
      super(props);

      this.state = {
         barClubLounge: false,
         seeTheTown: true,
         eventsEntertainment: true,
         familyFriendlyOnly: false
      }
   }

   handleOnChange = (event) => {  // Arrow function binds `this`
      let value = event.target.checked;

      if(event.target.className == "barClubLounge") {

         this.setState({ barClubLounge: value}, () => {  //here
             console.log(value);
             console.log(this.state.barClubLounge);
             //both will print same value
         });        

      }
   }

   render() {
      return (
          <input className="barClubLounge" type="checkbox" onChange={this.handleOnChange} checked={this.state.barClubLounge}/>
      )
   }
}

ReactDOM.render(<NightlifeTypes/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

Dado que setState es una función asíncrona. Eso significa que después de llamar a setState, la variable de estado no cambia inmediatamente. Entonces, si desea realizar otras acciones inmediatamente después de cambiar el estado, debe usar el método de devolución de llamada de setstate dentro de su función de actualización setState.

handleOnChange = (event) => { 
     let inputState = event.target.checked;
      if(event.target.className == "barClubLounge") {
         this.setState({ barClubLounge: inputState}, () => {  //here
             console.log(this.state.barClubLounge);
             //here you can call other functions which use this state 
             variable //
         });        
      }
   }

---

---

Utiliza Nuestro Buscador