Reaction-Bootstrap模式未弹出单击功能

我在一个jhister应用程序中工作。当我创建自己的模式并将状态设置为True时，我的自定义模式将在应用程序的初始呈现时显示，但当我将其设置为False并尝试通过我的函数调用该模式时，它不会出现。

然后，当我调用handleShow()时，浏览器上会出现警告&Hello"；，但它不会调用setShow()。

我也尝试过使用jhister的内置模式，但似乎我必须传递一个包含id的特定URL才会出现

导入

 import { Modal } from 'react-bootstrap';

状态

    const [showModal, setShow] = useState(false);
     

模态函数

    const handleClose = () => setShow(false);
    const handleShow = () => {
    alert('hello');
    setShow(true);
  };

删除函数

   const handleDelete = row => {
   dispatch(deleteEntity(row));
  };

引导操作列和模式内容

    {
  dataField: 'databasePKey',
  text: 'Actions',
  headerStyle: { backgroundColor: 'red', color: 'white' },
  formatter: (cellContent, row) => {
    return (
      <>
        <div className="btn-group flex-btn-group-container">
          <Button onClick={() => handleShow()} color="danger" size="sm" 
      data-cy="entityDeleteButton">
            <FontAwesomeIcon icon="trash" /> <span className="d-none d- 
      md-inline"></span>
          </Button>
          {showModal === true ? <Modal /> : null}
        </div>
        <Modal show={showModal} onHide={handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Confirm delete operation</Modal.Title>
          </Modal.Header>
          <Modal.Body>Are you sure you want to delete this Terminal? 
         </Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={handleClose}>
              Cancel
            </Button>
            <Button variant="primary" onClick={() => 
          handleDelete(row.id)}>
              Confirm
            </Button>
          </Modal.Footer>
        </Modal>
       </>
      );
      },
      },

---

解决方案

错误如下：handleShow是函数。调用ModalContent组件时应检查状态变量

已修复代码：

    <div className="btn-group flex-btn-group-container">
        <Button onClick={() => handleShow()} color="danger" size="sm" datacy="entityDeleteButton">
          <FontAwesomeIcon icon="trash" /> <span className="d-none d-md-inline"></span>
        </Button>
        {showModal === true ? <ModalContent /> : null}
    </div>