如何判断React Query Mutation当前执行是否成功？

问题 #

我有如下React Query Hook：

export const useUpdateSupplier = () => {
    return useMutation({
        mutationFn: (updateSupplierCommand: UpdateSupplierCommand) => axiosClient.post('/suppliers', updateSupplierCommand).then((res: AxiosResponse) => res.data),
        onSuccess: async () => { await queryClient.invalidateQueries({ queryKey: [queries.get_suppliers] }); toastSuccess('Supplier updated.'); },
        onError: (error: AxiosError) => { toastError(error); }
    })
}

我在组件的处理函数中调用它：

const handleUpdate = () => {
     mutation.mutate({ id: props.supplier.id, name: name, website: website });
     if (mutation.isSuccess) props.handleHideUpdateComponent(); // 此处为上一次mutation的值，而非当前的
}

我希望判断该mutation是否执行成功（以此隐藏组件），但发现error、isError、isSuccess这些属性似乎保留的是上一次mutation的结果。我忽略了什么？是否需要以await方式调用mutation？

解答 #

问题原因 #

mutate是异步执行的，调用后不会立刻更新isSuccess等状态值。你当前的代码在调用mutate后马上判断isSuccess，此时当前mutation还未完成，拿到的必然是上一次mutation的状态。

解决方案 #

方案1：使用mutate的回调参数

mutate支持传入onSuccess和onError回调，直接在调用时添加隐藏组件的逻辑：

const handleUpdate = () => {
  mutation.mutate(
    { id: props.supplier.id, name: name, website: website },
    {
      onSuccess: () => {
        props.handleHideUpdateComponent();
      }
    }
  );
}

这种方式无需修改原Hook，仅在调用时扩展逻辑即可。

方案2：监听isSuccess状态变化

通过useEffect监听mutation.isSuccess的变化，状态变为true时执行隐藏逻辑，同时重置状态避免重复触发：

import { useEffect } from 'react';

// 组件内部
const mutation = useUpdateSupplier();

useEffect(() => {
  if (mutation.isSuccess) {
    props.handleHideUpdateComponent();
    mutation.reset(); // 重置状态，防止后续重渲染重复触发
  }
}, [mutation.isSuccess, props.handleHideUpdateComponent, mutation]);

适合需要基于状态变化做统一处理的场景。

方案3：使用mutateAsync实现await调用

mutate不支持直接await，但可以用mutateAsync替代，它返回Promise，支持async/await语法：

const handleUpdate = async () => {
  try {
    await mutation.mutateAsync({ id: props.supplier.id, name: name, website: website });
    props.handleHideUpdateComponent();
  } catch (error) {
    // 错误处理逻辑（原Hook的onError仍会执行，此处可按需补充）
  }
}

注意：使用mutateAsync时，原Hook中的onSuccess和onError依然会触发，无需重复编写toast等逻辑。

总结 #

核心问题在于mutate的异步特性，状态更新需要等待React重渲染后才会生效，不能同步调用后立刻判断状态。三种方案可根据业务场景选择：回调和mutateAsync适合单次操作处理，useEffect适合全局状态监听。

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