reactjs Rejected react-query mutation导致“Uncaught(in promise)”错误

cbeh67ev 于 2023-06-29 发布在 React

关注(0)|答案(2)|浏览(114)

在将react-scripts从v4升级到v5之后，我遇到了react-query ^3.34.8的问题。
我拒绝了useMutation中的一个promise，它导致了运行时错误Uncaught (in promise)：

// Component.js
import useDeleteMutation from './useDeleteMutation';
  
export default function Component(){
  const { mutateAsync: delete } = useDeleteMutation();
  
  return (
    <button onClick={delete}>Delete</button>
  );
}

// useDeleteMutation.js
import { useMutation } from 'react-query';

export default function useDeleteMutation() {
  return useMutation(
    async () => {
      return Promise.reject('Simulate failure');
    },
  )
};

阅读this和this，我似乎错过了一个try/catch。然而，我已经尝试添加它们（围绕对delete()的调用和围绕Promise.reject语句），但运行时错误仍然存在。
知道我错过了什么吗我还可以在try/catch中 Package 什么？我不想只是在create-react-app的配置中关闭警告。
谢谢

reactjs

来源：https://stackoverflow.com/questions/76543101/rejected-react-query-mutation-causing-uncaught-in-promise-error

2条答案

按热度按时间

hmae6n7t1#

如果不需要访问返回的Promise，可以使用mutate代替mutateAsync。它将在内部捕获错误。
在v4中，您仍然会在控制台中看到log语句，除非您传递了一个不写入控制台的自定义日志记录器。在v5中，我们将不再将失败的请求记录到控制台，因为它们不是开发人员应该得到警告的“警告”。

赞(0）回复(0）举报 2023-06-29

hgb9j2n62#

将.catch附加到delete调用，并调整useMutation钩子返回的内容，修复了错误：

// Component.js
import useDeleteMutation from './useDeleteMutation';
  
export default function Component(){
  const { mutateAsync: delete } = useDeleteMutation();
  
  return (
    <button onClick={() => { delete().catch(e => {}); }}>
     Delete
   </button>
  );
}

// useDeleteMutation.js
import { useMutation } from 'react-query';

export default function useDeleteMutation() {
  return useMutation(
    async () => {
      return new Promise(async (resolve, reject) => {
        reject('Simulate failure');
      });
    },
  )
};

赞(0）回复(0）举报 2023-06-29

我来回答

reactjs Rejected react-query mutation导致“Uncaught(in promise)”错误

2条答案

相关问题

热门标签

最新问答