React Query useMutation异常：onSuccess提前触发且data未定义

你在useMutation的mutationFn中没有返回异步请求的结果。login是异步函数，但你只在mutationFn里调用了它，没有用return返回这个Promise，导致mutationFn变成了同步函数——执行后立刻返回undefined，所以React Query会直接触发onSuccess，且data参数为undefined，完全没有等待异步请求完成。

修改useMutation的mutationFn，返回login函数的调用结果，让React Query能正确等待异步操作完成：

const {
  mutate: login,
  isSuccess,
  isPending,
} = useMutation({
  mutationKey: "login",
  // 添加return返回异步请求的Promise
  mutationFn: ({ identifier, password }) => {
    return login({ identifier, password });
  },
  onSuccess: (data) => {
    console.log(data); // 现在能正确获取接口返回数据
  },
  onError: (err) => {
    console.log(err);
  },
});

也可以简化写法，直接把login函数赋值给mutationFn：

mutationFn: login,

这样React Query会等待login返回的Promise完成，请求成功后才触发onSuccess，且能拿到正确的返回数据。

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