如何使用“重试”按钮让 React 错误边界重置状态？
How to get React Error Boundary to reset state with Try Again button?
我的 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 网络选项卡给我一个 404。
React 错误边界只有在 PokemonInfo 中的 img 未被注释时才会触发。它呈现 Cannot read property 'front_default' of undefined.
请让我知道我做错了什么。
我在你的例子中看到两个问题：
您正在 catch查询 queryFn 中的错误。 react-query 期望返回失败的承诺以处理错误。如果你抓住它（只是在你做的时候记录它），它将是一个已解决的 Promise，因此没有错误。对于记录错误，请使用 onError 回调。
为了使用错误边界来处理错误，需要设置属性useErrorBoundary: true。这在文档的 suspense 页面上有最好的描述，但你不需要将它与 suspense 一起使用：https://react-query.tanstack.com/guides/suspense
我的 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 网络选项卡给我一个 404。
React 错误边界只有在 PokemonInfo 中的 img 未被注释时才会触发。它呈现 Cannot read property 'front_default' of undefined.
请让我知道我做错了什么。
我在你的例子中看到两个问题：
您正在
catch查询 queryFn 中的错误。 react-query 期望返回失败的承诺以处理错误。如果你抓住它（只是在你做的时候记录它），它将是一个已解决的 Promise，因此没有错误。对于记录错误，请使用onError回调。为了使用错误边界来处理错误，需要设置属性
useErrorBoundary: true。这在文档的 suspense 页面上有最好的描述，但你不需要将它与 suspense 一起使用：https://react-query.tanstack.com/guides/suspense