如何像useQuery一样使用Tanstack Query useMutation？问题排查与解决

根本原因 #

React Query的useMutation和useQuery核心逻辑完全不同：

• useQuery是为查询场景设计的，组件挂载时会自动执行请求
• useMutation针对的是数据修改（增/删/改）操作，默认不会自动触发，必须手动调用它返回的mutate或mutateAsync方法，才会执行mutationFn里的请求

你的代码只声明了useMutation但从未触发请求，所以data一直是undefined，isError为false（因为根本没发起请求，自然不存在错误）。

解决办法 #

步骤1：修改自定义Hook，返回触发函数 #

在useUserx中返回useMutation提供的mutate方法，让外部组件能主动触发请求：

import { useMutation } from "@tanstack/react-query";
import axios from "axios";

export const useUserx = () => {
    const { data, isError, isLoading, mutate } = useMutation({
        mutationKey: ["user-mutate"],
        // 将参数改为外部传入，避免hook依赖localStorage的静态值
        mutationFn: async ({ loginKey, memberId }) => {
            const response = await axios.post('https://example.com/user/profile', {
                login_key: loginKey, 
                member_id: memberId
            })
            return response?.data;
        }
    })

    return { data, isError, isLoading, mutate }
}

步骤2：在组件中手动触发请求 #

如果想模拟useQuery的自动执行效果，可以在组件挂载时通过useEffect调用mutate；如果是交互触发（比如按钮点击），直接在事件回调里调用即可：

import { useEffect } from 'react';
import { useUserx } from './path-to-your-hook';

function UserProfile() {
    const { data, isError, isLoading, mutate } = useUserx();

    // 组件挂载时自动触发请求
    useEffect(() => {
        const loginKey = localStorage.getItem("login_key");
        const memberId = localStorage.getItem("member_id");
        // 确保获取到有效参数再触发
        if (loginKey && memberId) {
            mutate({ loginKey, memberId });
        }
    }, [mutate]);

    if (isLoading) return <div>加载中...</div>;
    if (isError) return <div>加载失败</div>;
    return <div>{data ? JSON.stringify(data) : '暂无数据'}</div>;
}

额外建议 #

如果这个请求只是获取用户数据（而非修改数据），更推荐直接用useQuery——它天生为查询场景设计，自带缓存、自动重试、挂载自动执行等特性，完全符合你原本想要的useQuery使用体验：

import { useQuery } from "@tanstack/react-query";
import axios from "axios";

export const useUserx = () => {
    const loginKey = localStorage.getItem("login_key");
    const memberId = localStorage.getItem("member_id");

    return useQuery({
        queryKey: ["user-profile"],
        queryFn: async () => {
            const response = await axios.post('https://example.com/user/profile', {
                login_key: loginKey, 
                member_id: memberId
            })
            return response?.data;
        },
        // 当loginKey或memberId为空时，禁用自动查询
        enabled: !!loginKey && !!memberId
    })
}

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