如何在React Query中等待mutation执行？解决重置密码流程顺序问题

你遇到的问题本质是：verifyCodeMutation的mutateAsync会在API请求完成后立即resolve，但onSuccess里的setRestorePasswordToken是React状态更新操作，属于异步执行。所以你紧接着调用newPasswordMutation时，restorePasswordToken还没更新成新值，导致请求参数错误。

最可靠的方式是直接使用verifyCodeMutation返回的响应数据，绕开React状态更新的异步延迟问题：

const onVerificationCodeSubmit = async ({ verificationCode, password }) => {
  // 直接获取验证接口返回的结果
  const verifyResponse = await verifyCodeMutation({ verificationCode, restoreToken });
  // 用返回的restoreToken直接调用重置密码接口，无需等待状态更新
  await newPasswordMutation({ 
    password, 
    restorePasswordToken: verifyResponse.data.restoreToken 
  });
};

你可以保留verifyCodeMutation的onSuccess回调继续更新restorePasswordToken状态，用于页面其他逻辑判断，但重置密码的调用不再依赖这个状态，从根源避免异步问题。

• 去掉newPasswordMutation里的enabled: restorePasswordToken配置，因为你是手动触发该mutation，enabled主要用于自动执行的场景（比如配合依赖自动触发）。
• 给两个mutation添加错误处理，避免请求失败导致流程卡住：

const onVerificationCodeSubmit = async ({ verificationCode, password }) => {
  try {
    const verifyResponse = await verifyCodeMutation({ verificationCode, restoreToken });
    await newPasswordMutation({ 
      password, 
      restorePasswordToken: verifyResponse.data.restoreToken 
    });
  } catch (error) {
    // 处理验证失败或重置密码失败的逻辑，比如提示用户
    console.error('密码重置失败:', error);
  }
};

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