如何使用“再试一次”按钮让 React Error Boundary 重置状态？

问题描述

我的 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。

React Error Boundary 只会在 img 中的 PokemonInfo 被取消注释时触发。它呈现 Cannot read property 'front_default' of undefined。

请告诉我我做错了什么。

解决方法

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

1. 您正在 catch 查询 queryFn 中的错误。 react-query 期望返回一个失败的 promise 以处理错误。如果你抓住了它（只是在你做的时候记录它），它将是一个已解决的 Promise，因此没有错误。要记录错误，请使用 onError 回调。

2. 为了使用错误边界来处理错误，您需要设置属性useErrorBoundary: true。这在文档中的 suspense 页面上得到了最好的描述，但您不需要将它与 suspense 一起使用：https://react-query.tanstack.com/guides/suspense