使用react和bootstrap 4打开一个弹出模型

Question

我有这个按钮，它开始弹出一个弹出窗口：

 <button type="button" className="btn btn-primary" data-toggle="modal" data-target={`#${truncate(customer.name)}`} onClick={() => { this.openPopUp(customer) }}>
                                {customer.name}
                            </button>

当我单击按钮时，此方法执行没有问题：

 openPopUp = (customer) => {
    let openPopUp;
    let service = new AccessControlInformationService();
    let createAccessControl = <button type="button" className="btn btn-primary" onClick={() => this.createAccessControll(customer.name)}>Save changes</button>

    service.checksAccessControl(customer.name, this.props.user.name).then(response => {
        if (response.status == "400") {
            if (customer.name) {
                let id = customer.name.replace(/ /g, '');
                let body = <div className="container">
                    <div>-------------------------------------------------------------------------- User Informartion --------------------------------------------------------------------------</div>
                    <div className="row">
                        <div className="col-sm">
                            <strong>Username</strong>
                        </div>
                        <div className="col-sm">
                            {this.props.user.name}
                        </div>
                    </div>
                    <br />
                    <div>--------------------------------------------------------------------- Access Control Information ---------------------------------------------------------------------</div>
                    <br />
                    <div className="row">
                        <div className="col-sm">
                            <strong>Customer Name</strong>
                        </div>
                        <div className="col-sm">
                            {customer.name}
                        </div>
                    </div>
                    <br />
                    <div className="row">
                        <div className="col-sm">
                            <strong>Access Reasons</strong>
                        </div>
                        <div className="col-sm">
                            <TextInput name="AccessReasons" onChange={this.handleChange} />
                        </div>
                    </div>
                    <br />
                    <div className="row">
                        <div className="col-sm">
                            <strong>Lease Time(hours)</strong>
                        </div>
                        <div className="col-sm dropdown">
                            <ComboBox
                                title="Select one.."
                                list={this.state.hour}
                                resetThenSet={this.resetThenSet}
                            />
                        </div>
                    </div>
                </div>

                openPopUp = <GenericPopUp id={id} title={customer.name} body={body} footer={createAccessControl} />

                this.setState({popUp:openPopUp})
            }
        } else {
            let path = {
                pathname: '/customers/' + customer.market + '/' + customer.code,
                state: { customer: customer }
            }
            this.props.history.push(path);
        }

    })
}

我在这里要做的是验证用户是否有权访问某些权限，如果有，那么他将被重定向到其他链接，如果没有，则将弹出一个窗口，显示有关body变量的所有信息。

我的问题是要打开弹出窗口，我需要在按钮上单击两次，并解决我决定将popUp的值放在状态变量中，以便渲染将再次运行并打开弹出窗口。第一次点击，但这种情况正在发生。

有人可以向我解释为什么吗？

这也是我的popUp类：

render() {
    return (
        <div>
            {this.state.open && (
                <div className="modal fade" id={this.props.id} tabIndex="-1" role="dialog" aria-labelledby={this.props.id} aria-hidden="true" style={{ width: 100 + '%' }}>
                    <div className="modal-dialog" role="document" style={{ maxWidth: 90 + '%' }}>
                        <div className="modal-content">
                            <div className="modal-header">
                                <h5 className="modal-title" id={this.props.id}>{this.props.title}</h5>
                                <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div className="modal-body">
                                {this.props.body}
                            </div>
                            <div className="modal-footer">
                                {this.props.footer}
                            </div>
                        </div>
                    </div>
                </div>
            )
            }
        </div>
    );
}