setState 不会立即更新状态

javascript ecmascript-6 reactjs

2022-08-30 02:32:56

我想问一下，为什么当我做一个活动时，我的状态没有改变。我前一阵子搜索过，我需要在构造函数中绑定函数，但状态仍然没有更新。onClickonClick

这是我的代码：

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

答案 1

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

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

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

根据 React 文档

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

他们为什么要进行异步`setState`

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

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

答案 2

幸运的是，需要回调。这就是我们获得更新状态的地方。setState()

请考虑此示例。

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

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

setState 不会立即更新状态

他们为什么要进行异步setState

他们为什么要进行异步`setState`