JavaScript setState不会立即更新状态

小编典典

JavaScript setState不会立即更新状态

javascript

我想问一下为什么在执行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 });
// 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

阅读 299

2020-04-23

小编典典

幸运的是， setState进行了回调。这是我们获取更新状态的地方。考虑这个例子。

this.setState(
    { name: "Mustkeom" },
      () => {                        //callback
        console.log(this.state.name) // Mustkeom
      }
);

因此，当回调触发时，this.state是更新后的状态。你可以在回调中获取突变/更新的数据。

2020-04-23

小编典典

你的状态需要一段时间才能突变，由于console.log(this.state.boardAddModalShow)状态在突变之前就已执行，因此你会获得先前的值作为输出。因此，你需要在回调中将控制台写入setState函数

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

}

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

根据React docs

setState()不会立即变异，this.state但会创建待处理的状态转换。this.state调用此方法后进行访问可能会返回现有值。无法保证对setState的调用的同步操作，并且可能为提高性能而对调用进行批处理。

他们为什么要使setState异步

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

因此，setState调用是异步的也可以是批处理的，以获得更好的UI体验和性能。

2020-04-23

JavaScript setState不会立即更新状态

共2个答案