Javascript Axios中的反应引导模式弹出窗口？

**添加更多信息，我没有显示完整的组件**

我目前有一个提醒窗口，当预订申请表填写完毕后，会在网站上弹出。如果电子邮件已发送，则为成功警报；如果未发送，则会让您知道电子邮件未发送。我试图将它们交换到React引导模式窗口，但无法使它们成功打开模式窗口，下一页加载时没有模式

注意：我已经尝试在我的表单onSubmit以及表单submit按钮的onClick（）中调用handleShow（），但是模式窗口不会以任何方式显示

export default function BookingFormPrivate() {
    const { shows, getShows } = useContext(ShowContext)
    const [ name, setName ] = useState('')
    const [ email, setEmail ] = useState('')
    const [ phone, setPhone ] = useState('')
    const [ venue, setVenue ] = useState('')
    const [ location, setLocation ] = useState('')
    const [ time, setTime ] = useState('')
    const [ url, setUrl ] = useState('https://www.')
    const [ emailBody, setEmailbody ] = useState('')
    const [ type, setType ] = useState('Private')
    const [ events, setEvents ] = useState('')
    const [ showDate, setShowDate ] = useState('')

    useEffect(() => {
        getShows()
    }, [])

    const inputs = {
        name,
        email,
        phone,
        emailBody,
        events,
        venue,
        location,
        time,
        showDate,
        url,
        type
    }

    const [showModal, setShowModal] = useState(false);
    const handleShow = () => setShowModal(true);
    const handleClose = () => setShowModal(false);

    const sendMessage = () => {
        console.log(inputs)
        axios
            .post('/sendBooking', inputs)
            .then(res => {
                if (res.data.status === 'success') {
                    return (
                        <Modal.Dialog show={showModal} onHide={handleClose}>
                            <Modal className='modal fade' id='myModal'>
                                <Modal.Header className='modal-header'>
                                    <h5 className='modal-title'>Private Booking Email Sent</h5>
                                    <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </Modal.Header>
                                <Modal.Body className='modal-body'>
                                    <p>A message about your private event has been sent, we will get back to you as soon as possible. </p>
                                </Modal.Body>
                                <Modal.Footer className='modal-footer'>
                                    <button className='btn btn-primary' data-dismiss='modal' onClick={handleClose}>Close</button>
                                </Modal.Footer>
                            </Modal>
                        </Modal.Dialog>
                    )
                } else if (res.data.status === 'fail') {
                    alert("Message failed to send, please try again.")
                }        
            })
            .catch(error => {
                console.error(error)
            })
    }
    const clearInputs = () => {
        setName('')
        setEmail('')
        setPhone('')
        setEmailbody('')
        setEvents('')
        setVenue('')
        setLocation('')
        setTime('')
        setShowDate('')
        setUrl('https://www.')
        setType('Private')

        setNewPotentialShowInfo({
            name: '',
            phone: '',
            email: '',
            emailBody: '',
            venue: '',
            location: '',
            time: '',
            date: '',
            type: 'Private',
            url: 'https://www.'
        })
    }
    const [ newPotentialShowInfo, setNewPotentialShowInfo ] = useState({
            name: '',
            phone: '',
            email: '',
            emailBody: '',
            venue: '',
            location: '',
            time: '',
            date: '',
            type: 'Private',
            url: 'https://www.'
    })
    const { addPotentialShow } = useContext(ShowContext)

    const newPotentialShowFunction = () => {
        addPotentialShow(newPotentialShowInfo)
            .then(() => {
                clearInputs()
            })
            .catch(err => console.error(err.response.data.message))
    }
    const handleSubmit = e => {
        e.preventDefault();
        sendMessage();
        newPotentialShowFunction();
        // handleShow();
    }
    const handleChange = e => {
        console.log(newPotentialShowInfo)
        const { name, value } = e.target
        setNewPotentialShowInfo(prevPotentialShow => ({
            ...prevPotentialShow,
            [name]: value
        }))
            if( name === 'name' ){
                setName(value)
            } else if ( name === 'phone' ){
                setPhone(value)
            } else if ( name === 'email' ){
                setEmail(value)
    }

    const dateChange = (date) => {
        console.log(newPotentialShowInfo)
        const dateString = date.toString()
        const shortDate = dateString.slice(0, 15)
        setEvents(shortDate)
        console.log(shortDate)
        // setDate(date)
        setNewPotentialShowInfo(prevPotentialShow => ({
            ...prevPotentialShow,
            date:shortDate
        }))
    }

    const result = shows && shows.map(dates => (dates.date))
    const checkDateDisable = (data) => {
        return result.includes(new Date(data.date).toISOString())
    }

    return(
        <div className='bookingContainer'>
            <form className='bookingForm' onSubmit={handleSubmit}>
                <h3 className='formIntro'>PLEASE FILL OUT FORM TO<br/>REQUEST A PRIVATE EVENT</h3>
                <input type='text'
                        placeholder='Full Name'
                        name='name'
                        className='formInput'
                        required='required'
                        value={name}
                        onChange={handleChange}
                />
                <input type='email'
                        placeholder='E-mail'
                        name='email'
                        className='formInput'
                        required='required'
                        value={email}
                        onChange={handleChange}
                />
                <button type='submit' className='formButton' onClick={handleShow}>
                    Submit
                </button>
            </form>
            <div className='bookingCalendarPrivate'>
                <Calendar
                    onChange={dateChange}
                    value={events.date}
                    tileDisabled={checkDateDisable}
                    calendarType="US"
                />
            </div>
        </div>
    )
}

导出默认函数BookingFormPrivate（）{
const{shows，getShows}=useContext（ShowContext）
const[name，setName]=useState（“”）
const[email，setEmail]=useState（“”）
const[phone，setPhone]=使用状态（“”）
const[地点，设置地点]=使用状态（“”）
const[location，setLocation]=useState（“”）
常量[时间，设置时间]=使用状态（“”）
const[url，setUrl]=useState（'https://www.')
const[emailBody，setEmailbody]=useState（“”）
const[type，setType]=useState（'Private'）
const[events，setEvents]=useState（“”）
const[showDate，setShowDate]=useState（“”）
useffect（（）=>{
getShows（）
}, [])
常量输入={
名称
电子邮件，
电话，
电子邮件正文，
事件，
地点
位置，
时间
展示日期，
网址，
类型
}
const[showmodel，setshowmodel]=useState（false）；
const handleShow=（）=>setshowmodel（true）；
const handleClose=（）=>setshowmodel（false）；
const sendMessage=（）=>{
console.log（输入）
axios
.post（'/sendBooking'，输入）
。然后（res=>{
如果（res.data.status==='success'）{
返回(
已发送私人预订电子邮件
&时代；
关于您的私人活动的消息已发送，我们将尽快回复您

接近
)
}else if（res.data.status==='fail'）{
警报（“消息发送失败，请重试。”）
}        
})
.catch（错误=>{
控制台错误（错误）
})
}
常量clearInputs=（）=>{
集合名（“”）
设置电子邮件（“”）
设置电话（“”）
setEmailbody（“”）
setEvents（“”）
设置地点（“”）
设置位置（“”）
设定时间（“”）
设置显示日期（“”）
setUrl（'https://www.')
setType（'Private'）
setNewPotentialShowInfo({
名称：“”，
电话：''，
电子邮件：“”，
电子邮件正文：“”，
地点：''，
位置：“”，
时间：''，
日期：''，
键入：“Private”，
网址：'https://www.'
})
}
常量[newPotentialShowInfo，setNewPotentialShowInfo]=useState({
名称：“”，
电话：''，
电子邮件：“”，
电子邮件正文：“”，
地点：''，
位置：“”，
时间：''，
日期：''，
键入：“Private”，
网址：'https://www.'
})
const{addPotentialShow}=useContext（ShowContext）
const newPotentialShowFunction=（）=>{
addPotentialShow（新建PotentialShowInfo）
.然后（（）=>{
clearInputs（）
})
.catch（err=>console.error（err.response.data.message））
}
常量handleSubmit=e=>{
e、 预防默认值（）；
sendMessage（）；
newPotentialShowFunction（）；
//handleShow（）；
}
常量handleChange=e=>{
console.log（newPotentialShowInfo）
常量{name，value}=e.target
setNewPotentialShowInfo（prevPotentialShow=>({
…预演，
[名称]：值
}))
如果（名称=='name'）{
集合名（值）
}如果是，则为else（姓名==‘电话’）{
设置电话（值）
}else if（name==='email'）{
设置电子邮件（值）
}
const dateChange=（日期）=>{
console.log（newPotentialShowInfo）
const dateString=date.toString（）
const shortDate=dateString.slice（0,15）
setEvents（短日期）
console.log（短日期）
//设置日期（日期）
setNewPotentialShowInfo（prevPotentialShow=>({
…预演，
日期：短日期
}))
}
const result=shows&&shows.map（dates=>（dates.date））
const checkDateDisable=（数据）=>{
返回结果.includes（新日期（data.Date）.toISOString（））
}
返回(
请填写申请私人活动的表格

提交
)
}

尝试使用useffect（）钩子（）执行http请求。useffect（）接受一个回调函数，该函数在组件装入DOM后执行。 useffect（）的第二个参数是依赖项数组。在本例中，我们传递一个空数组，因为我假设您只需要执行一次这段代码

此外，您的状态变量需要位于组件内部，才能正确访问它们

const SendMessage = props => {
    const [showModal, setShowModal] = useState(false);
    const handleShow = () => setShowModal(true);
    const handleClose = () => setShowModal(false);

    useEffect(() => {
       axios
         .post('/sendBooking', inputs)
         .then(res => {
           if (res.data.status === 'success') {
              handleShow();
           } else if (res.data.status === 'fail') {
              alert("Message failed to send, please try again.");
           }
         })
    }, []);

    return (
      {showModal ? (
        <Modal.Dialog show={handleShow} onHide={handleClose}>
          <Modal className='modal fade' id='myModal'>
            <Modal.Header className='modal-header'>
              <h5 className='modal-title'>Private Booking Email Sent</h5>
              <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </Modal.Header>
            <Modal.Body className='modal-body'>
              <p>A message about your private event has been sent, we will get back to you as soon as possible. </p>
            </Modal.Body>
            <Modal.Footer className='modal-footer'>
              <button className='btn btn-primary' data-dismiss='modal' onClick={handleClose}>Close</button>
            </Modal.Footer>
          </Modal>
         </Modal.Dialog>
       ) : null}
    );
}

const SendMessage=prop