React Native Expo中TanStack Query登录请求报错及控制台警告问题

问题场景 #

在React Native Expo应用中，封装了Axios请求工具axiosApi，并通过TanStack Query的useMutation实现登录请求。当传入错误凭证时，虽然能正确返回“Invalid credentials”错误，但控制台会额外输出以下警告：

Invalid credentials
at node_modules/@tanstack/query-core/build/lib/mutation.js:153:10 in Mutation#execute

原因分析 #

TanStack Query的useMutation默认会捕获未被显式处理的错误，并在控制台抛出警告。当前代码中，mutateAsync的.catch仅捕获错误但未做实际处理，导致TanStack Query判定错误未被处理，进而触发警告。

解决方案 #

方案1：通过useMutation的onError回调处理错误 #

这是TanStack Query推荐的错误处理方式，直接在mutation配置中定义错误处理逻辑，避免控制台警告：

// api/index.js
export default function useApiHook() {
  const login = useMutation(
    (obj) => axiosApi('POST', `auth/login`, obj),
    {
      onError: (error) => {
        // 这里可以添加自定义错误处理，比如用Toast提示用户
        console.error('登录失败:', error);
      }
    }
  )

  return { login }
}

同时优化登录页面的调用逻辑，确保错误处理更清晰：

// screens/login.js
const { login } = useApiHook()

const submitHandler = async (data) => {
  try {
    const res = await login.mutateAsync(data);
    // 处理登录成功逻辑，比如跳转首页、存储token等
  } catch (err) {
    // 可选：补充本地错误处理逻辑，比如更新页面状态
  }
}

方案2：确保mutateAsync的catch中做实际处理 #

如果不想在mutation配置中处理，也可以在调用mutateAsync时，在catch块中添加具体的错误处理逻辑（而非仅写err）：

// screens/login.js
const { login } = useApiHook()

const submitHandler = (data) => {
  login.mutateAsync(data)
    .then((res) => {
      // 处理成功逻辑
    })
    .catch((err) => {
      // 添加实际处理逻辑，比如提示用户
      console.error('登录出错:', err);
    });
}

额外优化点 #

• 移除useApiHook()调用时的可选链?.，因为它是默认导出的函数，直接调用即可，避免潜在的undefined问题。

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