React中使用react-final-form表单，如何点击提交后等待模态框确认再调接口

你当前的问题在于 onSubmit 函数无法直接监听用户在模态框的交互操作，执行完 setShowModal(true) 后会立刻向下执行接口请求，所以需要调整逻辑拆分触发时机，以下是两种可落地的实现方式：

方案1：状态驱动实现（更符合React声明式编程逻辑，推荐） #

核心思路是把表单提交的数据暂存在state中，等用户确认提交后再发起接口请求。

步骤1：新增暂存提交数据的state #

// 原有控制模态框的state
const [showModal, setShowModal] = useState(false);
// 新增：暂存用户提交的表单数据
const [submissionDraft, setSubmissionDraft] = useState<Payload | null>(null);

步骤2：改写onSubmit逻辑 #

onSubmit 仅负责暂存数据、弹出模态框，不发起请求：

function onSubmit(submission: Payload) {
  setSubmissionDraft(submission);
  setShowModal(true);
}

步骤3：实现模态框确认回调的请求逻辑 #

async function handleAcceptClick() {
  // 仅存在暂存数据时发起请求
  if (!submissionDraft) return;
  try {
    await api.create({
      submission: submissionDraft
    });
    // 可在此处补充提交成功逻辑：如提示成功、重置表单、跳转页面等
  } catch (err) {
    // 可在此处补充请求报错处理逻辑
  } finally {
    // 收尾：清空暂存数据、关闭模态框
    setSubmissionDraft(null);
    setShowModal(false);
  }
}

步骤4：实现模态框拒绝回调逻辑 #

function handleDeclineClick() {
  // 清空暂存数据、关闭模态框，不发起请求
  setSubmissionDraft(null);
  setShowModal(false);
}

方案2：Promise封装实现（逻辑更聚合） #

核心思路是把用户的模态框操作封装成可等待的Promise，在onSubmit中等待用户选择结果后再执行后续逻辑。

步骤1：新增存储resolve函数的ref #

const [showModal, setShowModal] = useState(false);
// 存储Promise的resolve方法，用于接收用户选择结果
const confirmResolveRef = useRef<(result: boolean) => void>();

步骤2：改写onSubmit逻辑 #

async function onSubmit(submission: Payload) {
  setShowModal(true);
  // 等待用户在模态框的选择结果
  const isConfirmed = await new Promise<boolean>(resolve => {
    confirmResolveRef.current = resolve;
  });
  // 用户确认后才发起请求
  if (isConfirmed) {
    await api.create({ submission });
    // 可补充提交成功逻辑
  }
  // 收尾
  setShowModal(false);
  confirmResolveRef.current = undefined;
}

步骤3：实现模态框两个回调 #

// 确认按钮回调
function handleAcceptClick() {
  confirmResolveRef.current?.(true);
}
// 拒绝按钮回调
function handleDeclineClick() {
  confirmResolveRef.current?.(false);
}

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