如何解决如何使用“再试一次”按钮让 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
。
请告诉我我做错了什么。
解决方法
我在您的示例中看到两个问题:
-
您正在
catch
查询 queryFn 中的错误。 react-query 期望返回一个失败的 promise 以处理错误。如果你抓住了它(只是在你做的时候记录它),它将是一个已解决的 Promise,因此没有错误。要记录错误,请使用onError
回调。 -
为了使用错误边界来处理错误,您需要设置属性
useErrorBoundary: true
。这在文档中的 suspense 页面上得到了最好的描述,但您不需要将它与 suspense 一起使用:https://react-query.tanstack.com/guides/suspense
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。