如何在Jquery的.on（'shown.bs.modal'）上发出API请求？

Question

当我的引导程序模式显示在页面上时，我想发出API请求。通常我会在componentDidMount()内执行此操作，但是由于React组件是如何在当前应用程序中安装的，因此我依靠jQuery触发我的模式。根据我在docs中所读的内容，您可以在使用模式时传递回调函数。因此，如果我调用了任何其他函数，则该函数不适用于我的句柄，但这对我不起作用。

export default class RoomConfig extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            patientName: '',

        };


        this.handleModalRef = this.handleModalRef.bind(this);
        this.makeApiRequestOnShow = this.makeApiRequestOnShow.bind(this);

      }

   async makeApiRequestOnShow() {

        const getRoomDetails = await axios.get(`/room/${this.state.roomId}/userconfig`);
        const roomDetails = getRoomDetails.data;

        const patientId = Object.values(roomDetails)[0].patient;
        const getPatientName = await axios.get(`/patient/${patientId}/name`);
        const patientName = getPatientName.data;

this.setState({ patientName });
    }


    handleModalRef(modalEl) {
        jQuery(modalEl)
            .on('shown.bs.modal', this.makeApiRequestOnShow);
    }
}

render(){
 return ( 
    <div>
        <div
                className="modal fade"
                id="room-config"
                ref={this.handleModalRef}
                tabIndex={-1}
                role="dialog"
         >
         <div className="modal-dialog modal-dialog-centered" role="document">
                 <div className="modal-content"> </div>
         </div> 
    </div> 
 )
}