setState不立即更新状态

我想问，为什么我的状态没有改变，当我做一个onclick事件。我搜索了一段时间之前，我需要在构造函数中绑定onclick函数，但仍然没有更新状态。这里是我的代码：setState不立即更新状态

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

来源

2016-12-22 Sydney Loteria

幽州需要一些时间发生变异，因为你的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体验和性能。

来源

2016-12-22 08:06:39

谢谢！这一个工程 –

setState不立即更新状态

回答

相关问题