Хук setState не меняет состояние вызова от дочернего - PullRequest
Новая
       7

Хук setState не меняет состояние вызова от дочернего

0 голосов
/ 01 апреля 2020

Я использую хук в компоненте для управления модальным состоянием. (Версия класса компонента воспроизводит проблему) handleClick откроет модальное и handleModalClose должно закрыться.

Я отправляю handleModalClose в модальный компонент и с console.log мог видеть, что он обрабатывается, но состояние isModalOpen не изменилось ( то же самое для обратного вызова setState). Когда я пытаюсь вызвать его с помощью setTimeout - состояние меняется, а модальное закрывается.

Почему, черт возьми, состояние не меняется, когда я вызываю изменение из дочернего ??? 

  const [isModalOpen, setModalOpen] = useState(false);
  const handleClick = () => {
    setModalOpen(true);
    // setTimeout(() => handleModalClose, 10000);
  };

  const handleModalClose = () => {
    console.log('!!!!!!!!handleModalClose');
    setModalOpen(false);
  };

  return (
    <div onClick={handleClick}>
      {isModalOpen && <Modal closeModal={handleModalClose} />}
    </div>
  );

и вот выдержка из Модал 

const Modal = (props) => {
  const { closeModal } = props;
  return (
    <>
      <div className="modal">
        <form className="" onSubmit={handleSubmit(onSubmit)}>
          <button type="button" className="button_grey button_cancel_modal" onClick={closeModal}>
          </button>

1 Ответ

0 голосов
/ 01 апреля 2020

ПРОБЛЕМА РЕШЕНА. e.stopPropagation () - добавлено. 

  const handleModalClose = (e) => {
    e.stopPropagation();
    console.log('!!!!!!!!handleModalClose');
    setModalOpen(false);
  };

Модал был закрыт и сразу же снова открылся путем всплывания без него.

...