useState 不能改变布尔值

Question

我正在处理一个项目，在该项目中，单击段落中的特定单词会打开/关闭<Overlay/>包含子组件的组件：<Modal />. 关闭按钮位于内部Modal并附加到回调函数。我试图用useState，并设置一个boolean隐藏的值之间true，并false可以处理这种情况，但似乎setHidden功能不起作用。

我的部分代码在这里：

  const [hidden, setHidden] = useState(false);
  const { renderOverlay } = getOverlay();
  const openModal = text => (
    <h1
      onClick={() => {
        openOverlay();
      }}
    >
      {`${text}`}
    </h1>
  );

  const closeModal = () => {
    setHidden(true);
    console.log(hidden); // false
  };

  const openOverlay = () => {
    !hidden
      ? renderOverlay(
        <Modal
              title="ABCDE"
              message="
        You must be a member of  to access the app
        "
              close={{ onClose: closeModal, text: 'Close' }}
          />
        )
      : renderOverlay();
  };
  return (
          <span
            className={paragraph.style === 'bold' ? 'boldspan' : null}
            key={paragraph.paragraphKey}
            style={{ color: paragraph.color }}
          >
            {paragraph.isLink ? openModal(paragraph.text) : paragraph.text + addSpace}
            {paragraph.break ? <br /> : null}
          </span>
        );

模态：

export default function Modal({ title, message, close, route }) {
  return (
    <ModalStyles>
      <div className="top__border" />
      <div className="content">
        <span className="title">{title}</span>
        <span className="message">{message}</span>
        <div className="button__group">
          {close && <Button type="primary" text={close.text} onClick={close.onClose} />}
          {route && <Button type="primary" text={route.text} onClick={route.onRoute} />}
        </div>
      </div>
    </ModalStyles>
  );
}

有谁知道为什么我不能更改函数中的hidden属性closeModal？