this.setState不立即突变状态 [英] this.setState doesn't mutate state immediately

问题描述

我想问一下当我做一个onclick事件时，为什么我的国家不会改变。之前我搜索过，我需要在构造函数中绑定onclick函数，但仍然状态不会更新。这是我的代码：

I would like to ask why my state is not changing when I do an onclick event. I've search a while ago that I need to bind the onclick function in constructor but still the state is not updating. Here's my code:

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

推荐答案

您需要一些时间进行变更，因为您的 console.log（this.state.boardAddModalShow）语句在状态变异，您将获得以前的值作为输出。所以你需要将控制台写回到setState函数中。

You state need some time to mutate and since your console.log(this.state.boardAddModalShow) statement executes before the state mutates, you get the previous value as output. So you need to write the console in the callback to the setState function

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

}

setState 是异步的。这意味着您不能在一行上调用setState，并假定下一个状态已更改。

setState is asynchronous. It means you can’t call setState on one line and assume state has changed on the next.

根据 React docs

according to React docs

setState（）不会立即变更 this.state ，而是创建一个
待处理国家过渡。调用此
方法后，访问 this.state 可能会返回现有值。没有
保证对setState的调用同步操作，并且可以调用
来批量获取性能。

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

为什么会使setState异步

这是因为setState会更改状态并导致rerendering。这个
可能是一个昂贵的操作，并且同步可能会使
的浏览器无响应。

This is because setState alters the state and causes rerendering. This can be an expensive operation and making it synchronous might leave the browser unresponsive.

因此，setState调用是异步的，以及批量更好的
UI体验和性能。

Thus the setState calls are asynchronous as well as batched for better UI experience and performance.

这篇关于this.setState不立即突变状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！