javascript - 为什么在setState之后State保持不变

当用户单击列表内的项目时，我试图显示/隐藏模式。模态按计划显示，但不能隐藏。调用_dismiss()时，将执行setState，但是当我在回调内部console.log state时，参数show仍然为true。

为什么会这样呢？

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>
        );
    }
}

Modal.jsx

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
        }
    }
}

最佳答案

单击其子级时，div仍在发生onClick事件事件。我怀疑正在调用_dismiss，然后正在调用_onClick。反应批处理setState调用，因此最终将show设置回true。

补救措施。

如果handler的close回调为您提供事件作为参数。在注释e.stopPropagation()中调用e.stopImmediatePropagation()或从@richsilv中调用。

或者，如果未通过事件。检查_onClick是还是否。如果是真的，请不要show