React表单组件如何获取React Query提交后的返回结果？

问题根源 #

你的代码存在两个核心问题：

1. addReview是异步函数，直接调用会返回Promise对象而非实际返回值，所以console.log(res)无法拿到有效结果；
2. 你没有使用React Query提供的mutate方法触发请求，而是直接调用原始的addReview，导致React Query的状态（isSuccess、data）完全没有更新，自然进不了成功判断逻辑。

正确解决方案 #

1. 在表单组件中正确使用useAddReviewMutate Hook

导入并解构React Query的mutation方法和状态，用mutate触发请求，再通过React Query的内置状态处理成功/失败逻辑：

import { useAddReviewMutate } from './path-to-your-mutate-file';
import React from 'react';

function ReviewForm() {
  // 解构React Query提供的mutation方法与状态
  const { mutate, isSuccess, data, isError, error } = useAddReviewMutate();

  const onSubmit = (values: ReviewFormValues) => {
    // 用mutate触发请求，而非直接调用addReview
    mutate(values);
  };

  // 监听isSuccess状态，处理成功后的逻辑（清空表单、展示提示）
  React.useEffect(() => {
    if (isSuccess && data) {
      console.log('提交成功，返回数据：', data);
      // 这里执行清空表单操作，比如调用表单的reset方法
      // 示例：formRef.current?.reset();
    }
  }, [isSuccess, data]);

  // 处理错误情况
  React.useEffect(() => {
    if (isError && error) {
      console.log('提交失败：', error);
      // 展示错误提示
    }
  }, [isError, error]);

  // 表单渲染代码...
  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      // 假设你用了表单库，先获取values再调用onSubmit
    }}>
      {/* 表单字段 */}
    </form>
  );
}

2. 简化你的useAddReviewMutate（可选）

不需要在onSuccess里手动返回数据，React Query会自动把请求返回值存入data状态，可简化代码：

export const useAddReviewMutate = () => {
  return useMutation((input: ReviewFormValues) => addReview(input), {
    onSuccess: (data) => {
      console.log('提交成功：', data);
    },
    onError: (error) => {
      console.log('提交错误：', error);
    },
  });
};

关键知识点回顾 #

• 异步函数调用必须用await或.then()处理，但在React Query场景下，应该用mutate触发请求，依赖React Query的状态管理来处理结果；
• React Query的useMutation会返回mutate方法和一系列状态（isSuccess、data、isError等），这些状态会自动根据请求结果更新，是处理异步请求的核心。

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