TanStack useMutation的onSuccess等选项失效问题求助

调用useMutation时，onSuccess等选项完全没效果，函数也没返回任何值，排查语法等问题后仍未解决。

相关代码 #

mutate函数 #

const [type, setType] = useState('login')

const {register, handleSubmit, formState: {errors}, reset} = 
useForm({
    mode: 'onChange'
})

const {mutate, isLoading} = useMutation(['auth'], 
({email, password}) => authService.main(email, password, type), 
{
  onSuccess: (data) => {
    alert('success')
    reset()
  }
})

onSubmit函数 #

const onSubmit = (data) => {
  mutate()
}

Auth服务代码 #

import Cookies from 'js-cookie'
import { $axios } from '../api'

class authService {
  async main(email, password, type) {
    try {
      const { data } = await $axios.post(`/auth/${type}`, {
        email,
        password
      })

      if (data.token) Cookies.set('red', data.token)
      // alert('Success!')
      return data
    } catch (error) {
      alert('Wrong email or password!')
      throw new Error(error)
    }
  }
}

export default new authService()

控制台存在错误提示，原链接已移除。

尝试过多种写法重构函数均无效，期望调用成功时弹出success提示并完成数据更新，以下是尝试过的写法：

// 写法1
const {mutate, isLoading} = useMutation({
  ['auth'] : ({email, password}) => AuthService.main(email, password, type),
  onSuccess: data => {
    alert('success')
    reset()
  }
})

// 写法2
const {mutate, isLoading} = useMutation({
  ['auth'] : (email, password) => authService.main(email, password, type),
  onSuccess: data => {
    alert('success')
    reset()
  }
})

// 写法3
const {mutate, isLoading} = useMutation({
  mtKey: ['auth'],
  mtFunc: ({email, password}) => authService.main(email, password, type),
  onSuccess(data) {
    alert('success')
    reset()
  }
})

// 写法4
const {mutate, isLoading} = useMutation({
  ['auth'] : authService.main(email, password, type), 
  onSuccess: (data) => {
    alert('success')
    reset()
  }
})

// 写法5
authService.main('test6@test.ru', '123456', 'login')
const {mutate, isLoading} = useMutation({
  mtFunc: mutation,
  onSuccess: (data) =>{
    alert('success')
    reset()
  }
})

// 写法6
const mutation = () => {authService.main('test6@test.ru', '123456', 'login')}

const {mutate, isLoading} = useMutation({
  mtFunc: mutation,
  onSuccess(data) {
    alert('success')
    reset()
  }
})

问题根源及解决方法 #

1. mutate调用未传参数
   定义的mutation回调需要email和password参数，但onSubmit里调用mutate()时未传入表单数据，导致authService.main拿不到参数请求失败，无法触发onSuccess。修正代码：

   const onSubmit = (data) => {
     mutate(data) // 传入表单数据
   }
   

2. useMutation参数格式错误
   React Query的useMutation正确参数格式有两种：

   • 顺序写法：useMutation(mutationFn, options)
   • 对象写法：useMutation({ mutationKey, mutationFn, onSuccess, ...options })
     你尝试的所有写法都不符合规范，比如自定义mtKey/mtFunc、把mutation key当对象属性等，都是错误用法。正确对象写法示例：

   const {mutate, isLoading} = useMutation({
     mutationKey: ['auth'],
     mutationFn: ({email, password}) => authService.main(email, password, type),
     onSuccess: (data) => {
       alert('success')
       reset()
     }
   })
   

3. 处理type的依赖变化
   type是状态值，当它变化时，mutation函数需要重新创建，可将type加入mutation key或用useCallback包裹函数，确保React Query感知依赖变化：

   const mutationFn = useCallback(({email, password}) => {
     return authService.main(email, password, type)
   }, [type])
   
   const {mutate, isLoading} = useMutation({
     mutationKey: ['auth', type],
     mutationFn,
     onSuccess: (data) => {
       alert('success')
       reset()
     }
   })
   

4. 优化错误处理
   服务中抛出的错误会被React Query捕获，可通过onError统一处理，避免全局未捕获错误：

   const {mutate, isLoading} = useMutation({
     mutationKey: ['auth', type],
     mutationFn,
     onSuccess: (data) => {
       alert('success')
       reset()
     },
     onError: (error) => {
       console.error('请求失败:', error)
     }
   })
   

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