按钮单击弹出所有模态而不是只显示一个答案

【问题标题】：Button click pops up all the modals instead of showing only one按钮单击弹出所有模态而不是只显示一个
【发布时间】：2019-05-22 08:15:23
【问题描述】：

我正在将数据从父组件传递给模态。我在单击按钮时显示模态。但是模态体不包含所需的数据。它将所有数据附加到正文中，而不是仅显示必要的内容。

这是父组件

{this.state.response.map((value, id) => {
  return (
    <div className="col-md-3 file-card-viewSection">
      <Button
        id={id+1}
        onClick={(e) => {this.setState({ showDocumentsModal: true })}}>
        <i className="fas fa-eye"></i>
      </Button>
    </div>
    <ViewDocumentDetailsModal
      show={this.state.showDocumentsModal}
      onHide={this.modalClose.bind(this)}
      documentdata={value.result} />
  );
})}

这是包含引导模式的子组件

class viewDocumentDetailsModal extends Component {

render() {
    console.log(this.props)
    return (
      <Modal
        {...this.props}
        size="lg"
        centered
      >
        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title-vcenter">
            Modal heading
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <h4>Centered Modal</h4>
          <ReactJson src={this.props.documentdata} />

        </Modal.Body>
        <Modal.Footer>
          <Button onClick={this.props.onHide}>Close</Button>
        </Modal.Footer>
      </Modal>
    );
  }
}

当我单击按钮时，它会同时显示两种模式。我不知道为什么。请帮帮我。谢谢。

这就是我得到输出的方式

这是整个父组件

                            {this.state.response.map((value, id) => {
                                return(
                                <div>
                                    <Card className="mb-4">
                                        <Card.Body className="row file-card-row">
                                            <div className="col-md-1 file-card-index">
                                                {id+1}
                                            </div>
                                            <div className="col-md-4 file-card-filename">
                                                {value.result.Filename}
                                            </div>
                                            <div className="col-md-4 file-card-status">
                                                {value.result.Status}
                                            </div>
                                            <div className="col-md-3 file-card-viewSection">
                                                <Button id={id+1} onClick={(e) => {this.setState({ showDocumentsModal: true,  modalOpened: id  })}}>
                                                    <i className="fas fa-eye"></i>
                                                </Button>
                                            </div>
                                        </Card.Body>
                                    </Card>
                                </div>
                                );
                            })} 
                            <ViewDocumentDetailsModal
                                              show={this.state.showDocumentsModal}
                                              onHide={this.modalClose.bind(this)}
                                              documentdata={this.state.response[this.state.modalOpened].result}
                                            />                      
                        </div>

【问题讨论】：

标签： reactjs bootstrap-modal react-bootstrap

【解决方案1】：

首先，我尝试调整代码的缩进（必须首先接受编辑），但在我看来，在第一段代码中，您返回了 <div> 元素和 @987654322 @ 没有任何父组件的元素：在 React 中这是不可能的（如果你在 render() 方法中，你应该总是返回一个元素。

无论如何，我认为您检索到多个 Modal，因为 <ViewDocumentDetailsModal> 元素在 this.state.response.map() 回调中返回：这样，对于每个 response，您返回一个不同的 Modal。

如果在this.state.response中你有不同Modal的数据，但你只想显示其中一个，你需要在状态中有一个不同的数字属性，比如this.state.modalOpened，你在其中保存了索引要显示的模态数据。然后，在return() 方法中，你应该这样写：

<>
  {this.state.response.map((value, id) => {
    return (
      <div className="col-md-3 file-card-viewSection">
        <Button
          id={id+1}
          onClick={(e) => {this.setState({ showDocumentsModal: true, modalOpened: id })}}>
          <i className="fas fa-eye"></i>
        </Button>
      </div>
    );
  })}
  <ViewDocumentDetailsModal
    show={this.state.showDocumentsModal}
    onHide={this.modalClose.bind(this)}
    documentdata={this.state.response[this.state.modalOpened].result} />
</>

【讨论】：