setState 不会立即更新状态 [英] setState doesn't update the state immediately

问题描述

我想问一下为什么当我执行 onClick 事件时我的状态没有改变.我前段时间搜索过，我需要在构造函数中绑定 onClick 函数，但状态仍未更新.

这是我的代码:

从'react'导入React；从react-bootstrap/lib/Grid"导入网格；从'react-bootstrap/lib/Row'导入行；从'react-bootstrap/lib/Col' 导入 Col；从'components/board/BoardAddModal.jsx'导入BoardAddModal；从styles/boarditem.css"导入样式；类 BoardAdd 扩展了 React.Component {构造函数(道具){超级(道具)；this.state = {boardAddModalShow: 假};this.openAddBoardModal = this.openAddBoardModal.bind(this);}openAddBoardModal() {this.setState({ boardAddModalShow: true });//设置 boardAddModalShow 为 true/* 设置新状态后，它仍然返回一个假值 */console.log(this.state.boardAddModalShow);}使成为() {返回 (<Col lg={3}><a href="javascript:;";className={style.boardItemAdd}onClick={this.openAddBoardModal}><div className={[style.boardItemContainer,style.boardItemGray].join(' ')}>创建新板

</a></Col>);}}导出默认 BoardAdd

解决方案

这个回调真的很乱.只需使用异步等待:

异步 openAddBoardModal(){等待 this.setState({ boardAddModalShow: true });console.log(this.state.boardAddModalShow);}

I would like to ask why my state is not changing when I do an onClick event. I've search a while ago that I need to bind the onClick function in constructor but still the state is not updating.

Here's my code:

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

解决方案

This callback is really messy. Just use async await instead:

async openAddBoardModal(){
    await this.setState({ boardAddModalShow: true });
    console.log(this.state.boardAddModalShow);
}

这篇关于setState 不会立即更新状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！