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-query 3.3.6 和 axios 0.21.1（均为最新版本）。

谁能指出我正确的方向？

Answer 1

useMutation 第一个参数需要一个返回承诺的函数。这被称为变异函数。你返回的不是一个承诺，而是一个空洞。您需要使用 async/await 或从 axios 返回承诺。

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

为什么我的反应查询突变总是“成功”？

1 个答案: