Javascript ReactJS模态组件赢得'；t关闭onclick

我创建了一个链接到reactJs前端的用户CRUDAPI。我一直在使用引导组件，并决定使用模态组件来编辑表单。唯一的问题是，由于某种原因，当模式打开时，除非重新加载浏览器，否则无法再次退出它

EditUserModal.js的代码如下：

import React, { Component } from 'react';
import {Modal, Button, Row, Col, Form} from 'react-bootstrap';
import * as moment from 'moment';

const BASE_API_URL = `http://localhost:56062/api/users`;

var currentDate = new Date();



export class EditUserModal extends Component{
    constructor(props){
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }



    componentDidMount(){
      }

    handleSubmit(event){
        event.preventDefault();
        fetch(BASE_API_URL,{
            method:'PUT',
            headers:{
                'Accept':'application/json',
                'Content-Type':'application/json'
            },
            body:JSON.stringify({

                Id: event.target.Id.value,
                firstName: event.target.firstName.value,
                lastName: event.target.lastName.value,
                Email: event.target.Email.value,
                mobileNumber: event.target.mobileNumber.value,
                dateOfBirth: event.target.dateOfBirth.value,
                lastModified: currentDate
            })
        })
        .then(res=> res.json())
        .then((result) =>
        {
            console.log(result);
        },
        (error) => {
            console.log('Failed')
        }
        )
    }

    render(){
        return(

            <Modal
            {...this.props}
            size="lg"
            aria-labelledby="contained-modal-title-vcenter"
            centered
          >
            <Modal.Header closeButton>
              <Modal.Title id="contained-modal-title-vcenter">
                Edit User
              </Modal.Title>
            </Modal.Header>
            <Modal.Body>
              <div className="editFormContainer">
                  <Row>
                      <Col sm={12}>
                          <Form onSubmit={this.handleSubmit}>

                          <Form.Group controlId="Id">
                                <Form.Label>User ID</Form.Label>
                                <Form.Control name="Id" disabled defaultValue = {this.props.userid} type="text" placeholder="Id" />
                              </Form.Group>
                              <Form.Group controlId="firstName">
                                <Form.Label>First Name</Form.Label>
                                <Form.Control name="firstName" required  type="text" defaultValue = {this.props.firstname} placeholder="First Name" />
                              </Form.Group>
                              <Form.Group controlId="lastName">
                                <Form.Label>Last Name</Form.Label>
                                <Form.Control name="lastName" required type="text" defaultValue = {this.props.lastname} placeholder="Last Name"  />
                              </Form.Group>
                              <Form.Group controlId="Email">
                                <Form.Label>Email address</Form.Label>
                                <Form.Control name="Email" required type="email" defaultValue = {this.props.useremail} placeholder="Email e.g. name@example.com" />
                              </Form.Group>
                              <Form.Group controlId="mobileNumber">
                                <Form.Label>Mobile Number</Form.Label>
                                <Form.Control name="mobileNumber" required type="text" defaultValue = {this.props.mobilenumber} placeholder="Mobile e.g. 0723218223 or +447236475886" />
                              </Form.Group>
                              <Form.Group controlId="dateOfBirth">
                                <Form.Label>Date of Birth</Form.Label>
                                <Form.Control name="dateOfBirth" required type="date" defaultValue = {moment(new Date(this.props.dateofbirth)).format('YYYY-MM-DD')} placeholder="Date of Birth e.g. 05-02-97" />
                              </Form.Group>
                            <Form.Group>
                                <Button variant="primary" type="submit">Edit User</Button>
                            </Form.Group>

                          </Form>

                      </Col>
                  </Row>
              </div>
            </Modal.Body>
            <Modal.Footer>
              <Button variant="danger" onClick={this.props.onHide}>Close</Button>
            </Modal.Footer>
          </Modal>
        )
    }
}

---

这是因为您已将

show

prop硬编码为

true

<EditUserModal show={this.state.editModalShow} {...otherProps} /> 

导出类用户扩展组件{
建造师（道具）{
超级（道具）；
this.state={users:[]，addModalShow:false，editModalShow:false}
}
render（）{
const{users，userid，firstname，lastname，useremail，mobilenumber，dateofbirth，lastmodified}=this.state；
让addModalClose=（）=>this.setState（{addModalShow:false}）；
让editModalClose=（）=>this.setState（{editModalShow:false}）；
返回(
this.setState（{addModalShow:true}）}>
添加用户
身份证件
名字
姓
电子邮件
手机号码
出生日期
最后修改
编辑
删除
{users.map（user=>
{user.Id}
{user.firstName}
{user.lastName}
{user.Email}
{user.mobileNumber}
{矩（新日期（user.dateOfBirth））.format（'YYYY-MM-DD'）}
{user.lastModified}
{this.setState（{editshowmodel:true}）；}>
编辑用户
this.deleteUser（user.Id）}>Delete
)}
)
}
}

这是一张草图。。。但是像这样的事情：

导出类用户扩展组件{
建造师（道具）{
超级（道具）；
this.state={users:[]，addModalShow:false，editModalShow:false，currentEdit:null}
}
addModalClose=（）=>this.setState（{addModalShow:false}）；
editModalClose=（）=>this.setState（{editModalShow:false}）；
render（）{
const{users，currentEdited}=this.state；
返回(
this.setState（{addModalShow:true}）}>
添加用户
身份证件
名字
姓
电子邮件
手机号码
出生日期
最后修改
编辑
删除
{users.map（user=>
{user.Id}
{user.firstName}
{user.lastName}
{user.Email}
{user.mobileNumber}
{矩（新日期（user.dateOfBirth））.format（'YYYY-MM-DD'）}
{user.lastModified}
{this.setState（{CurrentEdit:user，editModalShow:true}）；}>
编辑用户
this.deleteUser（user.Id）}>Delete
)}
)
}
}

您总是通过show={true}。你不应该传递editModalShow prop而不是{true}吗？当我这样做时，我只是在点击模式按钮后得到一个白色屏幕@G_SAlso，我现在的方式基本上也提供了一个白色屏幕，但至少显示了模态形式。但我无法退出。当您进入白色屏幕时，控制台中有错误吗？@G_S它说：警告：无法对未安装的组件执行反应状态更新这是无效的，当我有这样的代码时，它只显示表中的最后一项。我不确定它为什么没有获得正确的信息。在映射中包含模态没有意义。我宁愿将其作为当前已编辑的单个组件实例拉出props@gaditzkhori我该怎么做呢？因为Zohaib@Zohaib的考试方式，基本上会加载所有用户，然后像这样显示api中的最后一个对象。模态现在正确关闭，但该按钮不会将道具发送到模态打开时显示的表单。您可以发送一个包含代码的沙盒吗？e、 实际上，在使用你的技术时，我必须单独设置道具，但现在一切都很好

handleSubmit(event){

        event.preventDefault();
        fetch(BASE_API_URL,{
            method:'PUT',
            headers:{
                'Accept':'application/json',
                'Content-Type':'application/json'
            },
            body:JSON.stringify({

                Id: event.target.Id.value,
                firstName: event.target.firstName.value,
                lastName: event.target.lastName.value,
                Email: event.target.Email.value,
                mobileNumber: event.target.mobileNumber.value,
                dateOfBirth: event.target.dateOfBirth.value,
                lastModified: currentDate
            })
        })
        .then(res=> res.json())
        .then((result) =>
        {
            console.log(result);
        },
        (error) => {
            console.log('Failed')
        }
        )
    }

<EditUserModal show={this.state.editModalShow} {...otherProps} />