useState не может изменить логическое значение - PullRequest
Новая
       16

useState не может изменить логическое значение

0 голосов
/ 13 июня 2019

Я работаю над проектом, в котором нажатие на определенное слово в абзаце открывает / закрывает компонент <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?

...