React Query组件中如何定义不同名称的mutate？解决相关报错

你遇到的"mutate is not function"错误，核心原因是解构方式与React Query版本不匹配，useMutation在v3和v4中的返回值结构完全不同，以下是对应版本的正确写法：

React Query v3（返回数组） #

v3中useMutation返回一个数组：第一个元素是mutate函数，第二个是包含状态的对象。重命名mutate直接在数组解构时处理，同时注意给重复的状态变量（如isLoading）重命名避免冲突：

// 第一个useMutation - 校验兑换码
const [mutateRedeemCode, { isLoading: isRedeemLoading }] = useMutation(apiService.redeemCodeProduct);

// 第二个useMutation - 提交兑换操作
const [mutateRedeemSubmit, { isLoading: isSubmitLoading }] = useMutation(apiService.redeemCodeProductSubmit);

React Query v4（返回对象） #

v4中useMutation返回对象，需通过对象解构并重命名属性，同时mutation函数需要放在mutationFn配置项中：

// 第一个useMutation - 校验兑换码
const { mutate: mutateRedeemCode, isLoading: isRedeemLoading } = useMutation({
  mutationFn: apiService.redeemCodeProduct
});

// 第二个useMutation - 提交兑换操作
const { mutate: mutateRedeemSubmit, isLoading: isSubmitLoading } = useMutation({
  mutationFn: apiService.redeemCodeProductSubmit
});

关键注意事项 #

• 必须确保状态变量（如isLoading、error）唯一，避免变量名冲突导致的逻辑异常。
• 可通过package.json确认版本：v3包名为react-query，v4包名为@tanstack/react-query。

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