setState不会立即更新状态

Question

setState不会立即更新状态

我想问，为什么我的状态不改变，当我做一个点击事件。我在前面搜索过，我需要在构造函数中绑定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 });// 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

Answer 1

你的状态需要一些时间来变异console.log(this.state.boardAddModalShow)在状态变异之前执行，您将得到前面的值作为输出。因此，您需要在回调中将控制台写入setState函数。openAddBoardModal(){         this.setState({ boardAddModalShow: true }, function () {              console.log(this.state.boardAddModalShow);         });}setState是异步的。这意味着您不能在一行上调用setState，并假定状态在下一行发生了更改。根据反应文档setState()不会立即变异this.state但是创建一个挂起的状态转换。存取this.state调用此方法后，可能会返回现有值。不能保证同步运行对setState的调用，调用可以批处理以获得性能增益。他们为什么要做setState异步这是因为setState改变了状态并导致重命名。这可能是一项昂贵的操作，使其同步可能会使浏览器无法响应。因此，setState调用是异步的，并且是批处理的，以获得更好的UI体验和性能。

Answer 2

因为setSatate是一个异步函数，所以您需要像这样将状态作为回调来安慰。openAddBoardModal(){     this.setState({ boardAddModalShow: true }, () => {         console.log(this.state.boardAddModalShow)     });}

Answer 3

setState()并不总是立即更新组件。它可以对更新进行批次或将更新推迟到以后。这使得阅读这个.在调用后立即状态setState()潜在的陷阱。相反，使用componentDidUpdate或者是setState回调(setState(updater, callback))，其中任何一个都保证在应用更新后触发。如果需要根据以前的状态设置状态，请阅读下面有关更新器参数的内容。setState()将始终导致重呈现，除非shouldComponentUpdate()返回假。如果正在使用可变对象，并且条件呈现逻辑无法在shouldComponentUpdate()，呼叫setState()只有当新状态与以前的状态不同时，才能避免不必要的重新呈现。第一个参数是带有签名的更新器函数：(state, props) => stateChangestate是对应用更改时的组件状态的引用。它不应该直接变异。相反，更改应该通过基于状态和道具的输入构建一个新对象来表示。例如，假设我们希望通过pros.Step在状态中增加一个值：this.setState((state, props) => {     return {counter: state.counter + props.step};});