我想问一下为什么在执行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
幸运的是, setState进行了回调。这是我们获取更新状态的地方。考虑这个例子。
this.setState( { name: "Mustkeom" }, () => { //callback console.log(this.state.name) // Mustkeom } );
因此,当回调触发时,this.state是更新后的状态。你可以在回调中获取突变/更新的数据。
你的状态需要一段时间才能突变,由于console.log(this.state.boardAddModalShow)状态在突变之前就已执行,因此你会获得先前的值作为输出。因此,你需要在回调中将控制台写入setState函数
console.log(this.state.boardAddModalShow)
openAddBoardModal(){ this.setState({ boardAddModalShow: true }, function () { console.log(this.state.boardAddModalShow); }); }
setState是异步的。这意味着你不能在一行上调用setState并假设状态在下一行已更改。
setState
根据React docs
setState()不会立即变异,this.state但会创建待处理的状态转换。this.state调用此方法后进行访问可能会返回现有值。无法保证对setState的调用的同步操作,并且可能为提高性能而对调用进行批处理。
setState()
this.state
他们为什么要使setState异步
这是因为setState更改状态并导致重新呈现。这可能是一项昂贵的操作,并且使其同步可能会使浏览器无响应。
因此,setState调用是异步的也可以是批处理的,以获得更好的UI体验和性能。