1

我的 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 只会在imgfromPokemonInfo未注释时触发。它呈现Cannot read property 'front_default' of undefined.

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

4

1 回答 1

2

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

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

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

于 2021-03-22T17:53:10.093 回答