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) => stateChange

state是对应用更改时的组件状态的引用。它不应该直接变异。相反，更改应该通过基于状态和道具的输入构建一个新对象来表示。例如，假设我们希望通过pros.Step在状态中增加一个值：

this.setState((state, props) => {
    return {counter: state.counter + props.step};});