使用TanStack Query useMutation实现删除按钮加载状态遇报错及无效问题

开发者阿泽

2026-7-6

TanStack Query useMutation 无isLoading属性且加载状态不显示的解决方法

核心问题分析

你遇到的两个问题根源一致：TanStack Query v4 版本对 useMutation 的状态属性做了重命名，同时代码里存在拼写错误导致加载样式失效。

具体解决步骤

替换状态属性名
TanStack Query v4 起，useMutation 的加载状态属性从 isLoading 更名为 isPending，原属性已被移除，这就是TypeScript报错的原因。把代码中所有的 isLoading 替换为 isPending 即可解决类型错误。
修复样式拼写错误
代码里的 loaddeing-xs 是拼写错误，正确应为 loading-xs，这个错误会导致加载 spinner 无法正常显示。

修改后的完整代码

const ButtonAction = ({ id }: ButtonActionProps) => {
  const router = useRouter();

  const { mutate: deletePost, isPending } = useMutation({
    mutationFn: () => {
      return axios.delete(`/api/posts/${id}`);
    },
    onError: (error) => {
      console.error(error);
    },
    onSuccess: () => {
      router.push("/");
      router.refresh();
    },
  });

  return (
    <div>
      <Link href="/edit/1" className="btn mr-2">
        <Pencil /> Edit
      </Link>
      <button onClick={() => deletePost()} className="btn btn-error">
        {isPending && (
          <span className="loading loading-spinner loading-xs"></span>
        )}
        {isPending ? (
          "Loading..."
        ) : (
          <>
            <Trash />
            Delete
          </>
        )}
      </button>
    </div>
  );
};

export default ButtonAction;