javascript - setState 不会立即更新状态

标签 javascript reactjs ecmascript-6

<分区>

我想问一下为什么当我执行onClick 事件时我的状态没有改变。我刚才搜索过我需要在构造函数中绑定(bind) 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

最佳答案

您的状态需要一些时间来改变,并且由于 console.log(this.state.boardAddModalShow) 在状态改变之前执行,您将获得先前的值作为输出。所以需要在setState函数的回调中写控制台

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

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

根据 React docs

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 异步

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.

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

关于javascript - setState 不会立即更新状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41278385/

相关文章:

javascript - JavaScript ES promise 履行处理程序作业队列是否在所有 setTimeout 和 setInterval 处理程序队列之前执行?

javascript - JavaScript 中需要解释 : Different outputs when used for. ..in 和 for(;;)

javascript - 如何在javascript中设置AES key 为 "private"?

Javascript - 结合还是不结合,这是个问题

javascript - 从 JSX 函数返回数组并在其他地方解构它

javascript - 如何使用扩展语法 es6 进行简化

JavaScript `bind` 无法处理导入的函数/对象

javascript - D3.js调整矩形到文本大小: getBBox()?

android - 在 React-Native Expo 的应用程序购买中?

javascript - 如何使用 react-pdf 进行自动换行