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);
  };

模块已关闭，然后通过冒泡而立即重新打开。

setState钩子不会更改从子级调用的状态

1 个答案: