使用自定义Hook控制Modal异常：setIsOpenModal失效问题排查

你遇到的问题核心是MyInfoPage和Modal各自调用了useModal，拥有完全独立的状态实例：

• MyInfoPage里的isOpenModal控制着Modal是否渲染；
• Modal里调用useModal生成的是另一套独立的state，点击backdrop调用的closeModal修改的是Modal自己的isOpenModal，和MyInfoPage里控制渲染的状态毫无关系，所以Modal不会消失。

你混淆的核心概念是：自定义hook不是全局状态容器。每次调用useModal，都会创建全新的useState实例，状态是组件级隔离的，不是多个组件共享同一份状态。

把控制Modal的状态统一放在父组件（MyInfoPage），通过props把closeModal传递给Modal，不要在Modal内部再调用useModal。

修改后的Modal.tsx #

// Modal.tsx
// ...import... //
interface ModalProps {
  closeModal: () => void;
  children: React.ReactNode;
}
function Modal(props: ModalProps) {
  const { closeModal, children } = props;
  const content = (
    <>
      <div className={styles.backdrop} onClick={closeModal}></div>
      <div className={styles.modal_body}>
        <div>{children}</div>
      </div>
    </>
  );
  return createPortal(content, document.getElementById("modal") as HTMLElement);
}
export default Modal;

修改MyInfoPage里的Modal调用 #

// MyInfoPage.tsx中的Modal部分
{isOpenModal && (
  <Modal closeModal={closeModal}>
    <div>
      <button onClick={pageBackHandler}>Yes</button>
      <button onClick={closeModal}>No</button>
    </div>
  </Modal>
)}

这样修改后，Modal里的backdrop点击调用的就是MyInfoPage里的closeModal，会直接修改控制Modal渲染的isOpenModal状态，Modal就能正常关闭了。

内容的提问来源于stack exchange，提问作者ki0