javascript - 如何在 React 中使用“useErrorHandler()”?
问题描述
我从这里react-error-boundary
看图书馆,但我不明白如何使用道具。useErrorHandler(error?: Error)
所以可以说我用错误边界包装我的应用程序 - 像这样
import {ErrorBoundary} from 'react-error-boundary';
<ErrorBoundary onError={myErrorHandler}>
<App />
</ErrorBoundary>
如何使用“useErrorHandler”来捕获异步代码回调中的错误,例如传播到ErrorBoundary
以便我可以使用myErrorHandler
?
“useErrorHandler”在哪里定义或导入?
我正在尝试将其用作捕获所有错误的设置-当您将 throws excection 添加到 java 中的 main 时。
异步代码示例:
...
return new Promise(function (resolve, reject) {
axios({
...
})
.then((res) => {
resolve(res);
// <-- ?
})
.catch((err) => {
reject(err);
});
});
解决方案
该文档没有明确说明如何导入该useErrorHandler
函数,但它是 API 的一部分,因此您可以使用与 import 相同的方式导入ErrorBoundary
。
import { useErrorHandler } from 'react-error-boundary';
例如:(基于文档)
import { useErrorHandler } from 'react-error-boundary';
function Greeting() {
const [greeting, setGreeting] = React.useState(null)
const handleError = useErrorHandler()
function handleSubmit(event) {
event.preventDefault()
const name = event.target.elements.name.value
fetchGreeting(name).then(
newGreeting => setGreeting(newGreeting),
handleError,
)
}
return greeting ? (
<div>{greeting}</div>
) : (
<form onSubmit={handleSubmit}>
<label>Name</label>
<input id="name" />
<button type="submit"}>
get a greeting
</button>
</form>
)
}
推荐阅读
- javascript - 如何在 TypeScript 项目中使用 Vue.use() 一个 JavaScript 插件
- c++ - 从用户输入中提取整数的枚举 Switch 语句
- string - 匹配模式的第 n 次出现并删除,直到找到另一个多括号表达式模式
- sql - bigquery 中的规范化(静态):我应该如何修复我的代码以获得规范化的数字?
- python - 更优雅的方法来避免单行减少这种用于对集合进行分组的 hacky 实现?
- sql - 多个 CTE 和分组依据
- powershell - 如何在 Go 中使用 VirtualQueryEx 读取检索进程内存信息?
- c - 声明意外行为
- html - 随机字符出现在我的 WordPress 网站上,我不知道它来自哪里
- spring-cloud-dataflow - 使用 SSL 的 Spring Cloud 数据流管理