reactjs - setState 钩子不会改变从孩子调用的状态

Question

我在组件中使用钩子来管理模态状态。（类版组件重现该问题）handleClick 将打开模式，handleModalClose 应该关闭。

我将 handleModalClose 发送到 Modal 组件，并且使用 console.log 可以看到它已被处理，但 isModalOpen 状态没有改变（回调 setState 相同）。当我尝试使用 setTimeout 调用它时 - 状态更改并且 Modal 正在关闭。

为什么当我调用从孩子改变时状态没有改变？？？

  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>

Answer 1

问题解决了。e.stopPropagation() - 添加。

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

模态被关闭并通过冒泡立即重新打开。