如何等待模态框返回数据后再继续执行函数？

场景与现有代码 #

我通过模态框确认用户是否要删除数据，需要根据用户的选择执行删除或取消逻辑，现有代码如下：

触发删除的图片按钮 #

<img src={deletes} width="25" height="25" alt="Edit" onClick={(e)=>deleteHandler()} className="imagemEnter"/>

触发模态框的函数 #

const [modal, setModal] = useState({
    isOpen: false,
    type: "",
    frase: "",
    confirm: ""
  });

function deleteHandler(){
    setModal({ isOpen: true, type: "sure?", frase:"Are you sure that you want to remove this data?", confirm:false });
    console.log(modal.confirm);
}

模态框组件 #

function ModalConfirm(props) {
  const { modal, setModal } = props;

  function closeModal() {
    setModal({ ...modal, isOpen: false });
  }

  function backPage(){
    setModal({ ...modal, isOpen: false, confirm: true});
  }

  return (
    <div> 
      {props.modal.tipo === "sure?" && (
        <div>
          <Modal
            ariaHideApp={false}
            isOpen={modal.isOpen}
            onRequestClose={closeModal}
            style={{
              overlay: {
                position: "fixed",
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                opacity: 1,
              },
              content: {
                textAlign: "center",
                position: "absolute",
                width: "500px",
                height: "360px",
                top: "130px",
                left: "550px",
                right: "500px",
                bottom: "200px",
                border: "1px solid #ccc",
                overflow: "auto",
                WebkitOverflowScrolling: "touch",
                borderRadius: "10px",
                outline: "none",
                padding: "20px",
              },
            }}
          >
              <img src={question} width="150" height="150" alt="Question" />
              <p></p>
              <p className="title">{props.modal.frase}</p>
              <div>
                <button
                  onClick={closeModal}
                  titulo="Cancel"
                ></button>
                <button
                  onClick={backPage}
                  titulo="Confirm"
                ></button>
              </div>
          </Modal>
        </div>
      )}
    </div>
  );
}

（注：原模态框组件存在语法错误，已修正JSX条件渲染写法与confirm属性的语法问题）

问题现象 #

首次点击删除图片时，console.log(modal.confirm)会在模态框关闭前执行，输出空值；点击确认按钮关闭模态框后再次点击删除图片，才会输出true。需要实现根据模态框的返回结果直接执行后续删除逻辑。

解决方案 #

模态框组件修改 #

通过回调函数将用户的确认状态传递给主组件，而非直接修改模态框状态：

const { confirmDelete, modal, setModal } = props;

function backPage(){
    confirmDelete(true); // 调用回调告知主组件用户确认删除
    setModal({ ...modal, isOpen: false});
}

主组件修改 #

新增逻辑接收确认结果，在用户确认后执行删除操作：

const [modal, setModal] = useState({
    isOpen: false,
    type: "",
    frase: ""
});

// 执行删除的核心逻辑
function handleDelete(confirmed) {
    if (confirmed) {
        // 这里编写删除数据的请求逻辑，比如fetch/axios调用
    }
}

function deleteHandler() {
    setModal({
      isOpen: true,
      tipo: "sure?",
      frase: "Are you sure that you want to remove this data?",
    });
}

return(
    // 页面其他内容
    <ModalConfirm
        confirmDelete={handleDelete} // 传递删除回调
        modal={modal}
        setModal={setModal}
    />
)

内容的提问来源于stack exchange，提问作者Luis Rotoly