`react-query` 变异 onSuccess 函数没有响应

Question

查询，\n我现在正在制作一个公告板。\n因此，我将信息title, content中的值 \xe2\x80\x8b\xe2\x80\x8bof 放入函数Form中。在该值中，console.log没有反应。react-queryonSuccess

\n

export const useAddFAQPost = () => {\n    return useMutation(FaqPost)\n}\n\nexport function FaqPost(data: FAQ) {\n    return axios.post<FAQ>('/add', data, {\n     \n    })\n}\n

\n

  const { mutate } = useAddFAQPost()\n\n    const onSubmit = useCallback((event: React.ChangeEvent<FormEvent>) => { \n        event.preventDefault();\n        return mutate({ title, type } as FAQ), {\n            onSuccess: async (data: string, context: string) => {\n                console.log(data);\n                console.log('why not?');\n            },\n            onError: async (data: string, context: string) => {\n                console.log(data);\n            } \n        };\n    }, [title, type])\n\nreturn (\n <> \n   <form onSubmit={onSubmit}>\n    <input type="text" name="title" value={title} ... />\n    <option value="faq">FAQ</option>\n   </form>\n </>\n)\n

\n

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

\n

我不知道为什么。帮助

\n

Answer 1

接受的答案是不正确的。onSuccess/onError 处理程序也可用于“mutate”方法（https://react-query.tanstack.com/reference/useMutation）。

这里的问题是，如果您的组件在突变完成之前卸载，那么这些额外的回调将不会运行。因此，您必须确保进行突变的组件不会卸载。在你的情况下：

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);
    },
    onSettled: () => {
      // Some unmounting action.
      // eg: if you have a form in a popup or modal,
      // call your close modal method here.
      // onSettled will trigger once the mutation is done either it
      // succeeds or errors out.
    }
  };
}, [title, type])

Answer 2

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()