React表单提交时如何等待模态框交互完成再执行后续提交逻辑

• React 的状态更新函数（比如你用到的setShowModal）本身是异步批量执行的，调用后不会阻塞后续代码执行，也不会等待模态框渲染完成、用户完成交互后再往下走。
• 你声明的handleModal虽然标注了async，但内部没有等待用户操作的异步逻辑，没有返回会等待用户交互才resolve的Promise。执行到setShowModal(true)之后函数会立刻向下走完所有逻辑，返回状态为resolved的Promise，外层的await handleModal()会直接通过，所以会立刻触发后续的submit函数，根本等不到用户在模态框的操作。

核心思路是把提交流程拆分为两个阶段：第一阶段触发表单提交时暂存表单数据、打开模态框；第二阶段监听模态框的确认/取消事件，用户完成操作后再执行后续业务逻辑和接口提交。

方案1：常规拆分写法（更易维护，推荐） #

第一步：新增状态暂存表单数据 #

// 新增：暂存待提交的表单数据
const [pendingSubmission, setPendingSubmission] = useState<IPayload | null>(null);
const [showModal, setShowModal] = useState(false);

第二步：修改表单提交逻辑 #

function onSubmit(submission: IPayload) {
  // 暂存表单数据
  setPendingSubmission(submission);
  // 打开模态框
  setShowModal(true);
}

第三步：绑定模态框的操作回调 #

给你的模态框组件绑定确认、取消事件的回调函数：

// 模态框确认按钮点击回调
async function handleModalConfirm() {
  // 此处处理模态框内的业务逻辑，获取用户操作结果
  // ...

  // 执行提交逻辑
  if (pendingSubmission) {
    await submit(pendingSubmission);
  }

  // 收尾：关闭模态框、清空暂存数据
  setShowModal(false);
  setPendingSubmission(null);
}

// 模态框取消/关闭按钮点击回调
function handleModalCancel() {
  setPendingSubmission(null);
  setShowModal(false);
}

方案2：Promise封装写法（保留原有await调用风格） #

如果想要保留原来await调用模态框的写法，可以封装一个返回Promise的模态框调用方法：

// 新增：存储Promise resolve方法的ref
const modalResolveRef = useRef<(result: {confirm: boolean; data: any}) => void | null>(null);

// 封装模态框调用方法
function openModal(): Promise<{confirm: boolean; data: any}> {
  return new Promise((resolve) => {
    setShowModal(true);
    modalResolveRef.current = resolve;
  });
}

// 模态框确认回调
function handleModalConfirm() {
  modalResolveRef.current?.({
    confirm: true,
    data: /* 此处传入模态框用户操作的结果数据 */
  });
  setShowModal(false);
}

// 模态框取消回调
function handleModalCancel() {
  modalResolveRef.current?.({
    confirm: false,
    data: null
  });
  setShowModal(false);
}

// 最终的表单提交逻辑，和你原来的写法风格保持一致
async function onSubmit(submission: IPayload) {
  const modalResult = await openModal();
  if (modalResult.confirm) {
    await submit(submission);
  }
}

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