setState不会立即更新状态

Question

我想问一下，为什么在执行onclick事件时，我的状态没有改变。我已经搜索到需要在构造函数中绑定onclick函数，但是状态仍然没有更新。

下面是我的代码：

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 }); // set boardAddModalShow to true

        /* After setting a new state it still returns 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

Answer 1

您的状态需要一些时间来变异，并且由于console.log(this.state.boardaddModalShow)在状态变异之前执行，因此您将获得先前的值作为输出。因此，您需要在对setstate函数的回调中编写控制台

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

setstate是异步的。这意味着您不能在一个行调用它，然后假设下一行的状态已经改变。

根据React文档