setState no actualiza el estado

Me gustaría preguntar por qué mi estado no cambia cuando hago un evento onclick. Hace un time busqué que necesito vincular la function onclick en el constructor, pero el estado no se está actualizando. Aquí está mi código:

import React from 'react'; import Grid from 'react-bootstrap/lib/Grid'; import Row from 'react-bootstrap/lib/Row'; import Col from 'react-bootstrap/lib/Col'; import BoardAddModal from 'components/board/BoardAddModal.jsx'; import style from 'styles/boarditem.css'; class BoardAdd extends React.Component { constructor(props){ super(props); this.state = { boardAddModalShow: false } this.openAddBoardModal = this.openAddBoardModal.bind(this); } openAddBoardModal(){ this.setState({ boardAddModalShow: true }); // After setting a new state it still return a false value console.log(this.state.boardAddModalShow); } render() { return ( <Col lg={3}> <a href="javascript:;" className={style.boardItemAdd} onClick={this.openAddBoardModal}> <div className={[style.boardItemContainer,style.boardItemGray].join(' ')}> Create New Board </div> </a> </Col> ) } } export default BoardAdd 

Usted console.log(this.state.boardAddModalShow) necesita algún time para mutar y, dado que su instrucción console.log(this.state.boardAddModalShow) ejecuta antes de que el estado mute, obtiene el valor anterior como salida. Entonces necesita escribir la console en la callback a la function setState

 openAddBoardModal(){ this.setState({ boardAddModalShow: true }, function () { console.log(this.state.boardAddModalShow); }); } 

setState es asynchronous. Significa que no puede llamar a setState en una línea y suponer que el estado ha cambiado en la siguiente.

de acuerdo con Reaccionar documentos

setState() no this.state inmediatamente this.state sino que crea una transición de estado pendiente. El acceso a this.state después de llamar a este método puede devolver el valor existente. No hay garantía de una operación sincrónica de llamadas a setState y las llamadas se pueden agrupar para get ganancias de performance.

¿Por qué harían setState async

Esto se debe a que setState altera el estado y causa la reorganización. Esta puede ser una operación costosa y hacerla sincrónica puede dejar al browser sin responder.

Por lo tanto, las llamadas a setState son asincrónicas y también se combinan para mejorar la experiencia y el performance de la IU.