如何使用“重试”按钮让 React 错误边界重置状态？答案

【问题标题】：How to get React Error Boundary to reset state with Try Again button?如何使用“重试”按钮让 React 错误边界重置状态？
【发布时间】：2021-04-03 12:04:57
【问题描述】：

我的 Pokemon 应用程序正在使用以下库：React Hook Form、React Query 和 React Error Boundary。

当没有发出请求时，它应该呈现No Pokemon Yet, Please Submit a Pokemon. 当发生错误时，一个Try Again 按钮将呈现在No Pokemon Yet, Please Submit a Pokemon 的位置。当点击Try Again 按钮时，No Pokemon Yet, Please Submit a Pokemon 将再次显示，并且搜索输入被重置，用户再次能够进行查询。

但是，我的实现不起作用。最初，No Pokemon Yet, Please Submit a Pokemon 不会在用户提交查询之前呈现。此外，当我键入没有任何匹配项的查询时，错误边界不会触发以告诉用户发生了什么并允许他们在单击 Try Again 按钮后重新提交查询。 DevTools Network 选项卡给了我一个 404。

只有在 PokemonInfo 中的 img 未注释时才会触发 React 错误边界。它呈现Cannot read property 'front_default' of undefined。

请让我知道我做错了什么。

【问题讨论】：

标签： reactjs react-hooks react-hook-form react-query react-error-boundary

【解决方案1】：

我在您的示例中看到两个问题：

您正在catching 查询 Fn 中的错误。 react-query 期望返回一个失败的 promise 来处理错误。如果你抓住它（只是在你做的时候记录它），这将是一个已解决的 Promise，因此没有错误。对于记录错误，请使用 onError 回调。
为了使用错误边界来处理错误，您需要设置属性useErrorBoundary: true。这在文档中的suspense页面上有最好的描述，但您不需要将它与suspense一起使用：https://react-query.tanstack.com/guides/suspense

【讨论】：

感谢您尝试解决问题。我添加了useErrorBoundary: true，当提交的查询在数据库中没有任何匹配项时，它现在正在呈现Request failed with status code 404。但是，您能否提供onError 的实现，因为我不清楚这些文档，也没有在线找到有用的示例。
useQuery(key, queryFn, { onError: (error) => console.log(error) })
谢谢，我现在要努力让应用程序在单击 Try Again 时从错误边界中恢复。