Javascript 为什么设置状态后状态保持不变

当用户单击列表中的项目时，我试图显示/隐藏模式。模式按计划显示，但无法隐藏。调用

\u dismise（）

时，执行

设置状态

，但当我

控制台.log

回调中的

状态

时，参数

show

仍然为真

为什么会这样

Message.jsx

export default class Message extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false
        };

        this._onClick = this._onClick.bind(this);
        this._dismiss = this._dismiss.bind(this);
    }

    _onClick(e) {
        e.preventDefault();
        this.setState({
            show: true
        })
    }

    _dismiss() {
        this.setState({
            show: false
        }, function () {
            console.log(this.state) // logs: Object {show: true}
        })
    }

    render() {
        return (
            <div onClick={this._onClick} className="message">
                <Modal show={this.state.show} close={this._dismiss}>
                    <h1>...</h1>
                </Modal>
            </div>
        );
    }
}

export default class Modal extends React.Component {
    constructor(props) {
        super(props);

        this._onClose = this._onClose.bind(this);
    }

    _onClose() {
        this.props.close()
    }

    render() {
        if (this.props.show) {
            return (
                <div className="modal" onClick={this._onClose} >
                    <div className="content">
                        {this.props.children}
                    </div>
                </div>
            );
        } else {
            return null
        }
    }
}

导出默认类消息扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
节目：假
};
this.\u onClick=this.\u onClick.bind（this）；
this.\u disclose=this.\u disclose.bind（this）；
}
_onClick（e）{
e、 预防默认值（）；
这是我的国家({
秀：真的
})
}
_解雇{
这是我的国家({
节目：假
}，函数（）{
console.log（this.state）//logs:Object{show:true}
})
}
render（）{
返回(
...
);
}
}

Modal.jsx

export default class Message extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false
        };

        this._onClick = this._onClick.bind(this);
        this._dismiss = this._dismiss.bind(this);
    }

    _onClick(e) {
        e.preventDefault();
        this.setState({
            show: true
        })
    }

    _dismiss() {
        this.setState({
            show: false
        }, function () {
            console.log(this.state) // logs: Object {show: true}
        })
    }

    render() {
        return (
            <div onClick={this._onClick} className="message">
                <Modal show={this.state.show} close={this._dismiss}>
                    <h1>...</h1>
                </Modal>
            </div>
        );
    }
}

export default class Modal extends React.Component {
    constructor(props) {
        super(props);

        this._onClose = this._onClose.bind(this);
    }

    _onClose() {
        this.props.close()
    }

    render() {
        if (this.props.show) {
            return (
                <div className="modal" onClick={this._onClose} >
                    <div className="content">
                        {this.props.children}
                    </div>
                </div>
            );
        } else {
            return null
        }
    }
}

导出默认类Modal.Component{
建造师（道具）{
超级（道具）；
this.\u onClose=this.\u onClose.bind（this）；
}
_onClose（）{
this.props.close（）
}
render（）{
如果（这个.道具.表演）{
返回(
{this.props.children}
);
}否则{
返回空
}
}
}

当其子项被单击时，div仍在执行

onClick

events事件。我怀疑正在调用

\u disclose

，然后正在调用

\u onClick

。对批处理

setState

调用进行反应，使其最终将

show

设置为

true

补救措施

如果处理程序的关闭回调将事件作为参数提供给您。调用

e.stopPropagation（）

或从注释

e.stoppimediatepropagation（）

中的@richsilv调用

---

或者如果它没有通过比赛。如果

show

为真或假，请在

上单击
。如果为true，则不要
设置state
当单击div的子项时，div仍处于
onClick
事件状态。我怀疑正在调用
\u disclose
，然后正在调用
\u onClick
。对批处理
setState
调用进行反应，使其最终将
show
设置为
true

补救措施

如果处理程序的关闭回调将事件作为参数提供给您。调用
e.stopPropagation（）
或从注释
e.stoppimediatepropagation（）
中的@richsilv调用

或者如果它没有通过比赛。如果
show
为真或假，请在
上单击
。如果是真的，不要
设置状态
，或者不要将模式放入
消息
中，这样事件就不会冒泡。或者甚至在模式的
@richsilv或其他消息中添加
事件.stopImmediatePropagation（）
。我不知道他这样做的理由。@richsilv感谢
stopimediatepropagation
我不知道这是存在的！我会修改我的答案，把它包括进去。太棒了，我快疯了。非常感谢大家！或者不要将模式放在
.message
中，这样事件就不会冒泡。或者甚至不要将
事件.stopImmediatePropagation（）
添加到模式的
\onClose
@richsilv或其他内容中。我不知道他这样做的理由。@richsilv感谢
stopimediatepropagation
我不知道这是存在的！我会修改我的答案，把它包括进去。太棒了，我快疯了。非常感谢大家！解决这些问题的最佳方法通常是在处理程序函数中执行console.log（）操作，然后它将快速告诉您调用它们的方式以及调用频率等。通常可以在那里看到问题。显然，如果您在回调中设置了state和check state，并且它已经更改，那么必须意外调用一个或多个处理程序。解决这些问题的最佳方法通常是console.log（）处理函数中的一些内容，然后会快速告诉您调用它们的方式和频率等。通常可以在那里看到问题。显然，如果您在回调中设置了state和check state，并且它已经更改，那么必须意外调用一个或多个处理程序。