`react-query` 改变 onSuccess 函数没有响应答案

【问题标题】：`react-query` mutate onSuccess function not responding`react-query` 改变 onSuccess 函数没有响应
【发布时间】：2022-01-11 06:30:27
【问题描述】：

查询，我现在正在做一个公告板。所以，我把Form信息中title, content的值放到react-query函数onSuccess中。在值中，console.log 没有反应。

export const useAddFAQPost = () => {
    return useMutation(FaqPost)
}

export function FaqPost(data: FAQ) {
    return axios.post<FAQ>('/add', data, {
     
    })
}

  const { mutate } = useAddFAQPost()

    const onSubmit = useCallback((event: React.ChangeEvent<FormEvent>) => { 
        event.preventDefault();
        return mutate({ title, type } as FAQ), {
            onSuccess: async (data: string, context: string) => {
                console.log(data);
                console.log('why not?');
            },
            onError: async (data: string, context: string) => {
                console.log(data);
            } 
        };
    }, [title, type])

return (
 <> 
   <form onSubmit={onSubmit}>
    <input type="text" name="title" value={title} ... />
    <option value="faq">FAQ</option>
   </form>
 </>
)

如果onSubmit成功或失败，console.log中的onSuccess，onError应该被记录，但是没有被记录。你为什么做这个？ onSuccess，onError 似乎没有响应。

我不知道为什么。帮助

【问题讨论】：

你能创建一个小提琴或代码沙箱来重现相同的内容吗，理论上你的代码应该可以正常工作
@SonuBamniya 代码工作正常。只有 onSuccess、onError 没有响应。

标签： javascript reactjs frontend react-query

【解决方案1】：

onSuccess / onError 等方法应该在 useMutation 挂钩创建中定义，而不是在根据文档调用 mutate 函数时定义。

https://react-query.tanstack.com/guides/mutations

你必须适应你的需要，但想法是：

export const useAddFAQPost = () => {
    return useMutation(FaqPost, {
       onSuccess: async (data: string, context: string) => {
          console.log(data);
          console.log('why not?');
       },
       onError: async (data: string, context: string) => {
          console.log(data);
       } 
    })
}

你也可以在拨打useAddFAQPost()时传递它

【讨论】：