为什么我的反应查询突变总是"successful"？

Question

我正在尝试进行react-query突变(使用axios，但如果切换到fetch API，我会得到相同的行为(。

我是这样设置的。

const mutation = useMutation(
() => {
axios.post("http://swapi.dev/api/foobar", {});
},
{
onSuccess: () => {
console.log("success");
},
onError: () => {
console.log("error");
},
}
);

URL可以是任何失败的内容。我已经在我使用的真正的API上进行了尝试，返回了500和404个错误。

我按如下方式激发突变。

mutation.mutate();

每次我得到"；成功；显示在控制台中。onError处理程序从不激发。当在Chrome的网络选项卡中查看时，调用会返回预期的错误(以及显示控制台错误(。

我使用的是react查询3.3.6和axios 0.21.1(都是最新发布的版本(。

有人能给我指正确的方向吗？

Answer 1

useMutation第一个参数需要一个返回promise的函数。这就是所谓的突变函数。你不是在回报承诺，而是在回报空虚。您需要使用async/await，或者从axios返回promise。

const mutation = useMutation(
() => {
return axios.post('http://swapi.dev/api/foobar', {})
},
{
onSuccess: () => {
console.log('success')
},
onError: () => {
console.log('error')
}
}
)