In my Hello.jsx
我正在调用一个可能会失败的 API 组件。这里调用了一个假APIloader
:
import React, { useEffect } from "react";
export const Hello = () => {
const loader = async () => {
return Promise.reject("API error.");
};
useEffect(() => {
const load = async () => {
await loader();
};
load();
}, []);
return <h1>Hello World!</h1>;
};
问题是ErrorBoundary
组件(此处未显示)应该打印一条红色消息,但没有。错误未被“捕获”。如果我throw
通常,不在异步函数内,它会显示红色文本“出现问题!”。有什么线索吗?
<div>
<ErrorBoundary>
<Hello />
</ErrorBoundary>
</div>
完整的 CodeSandbox 示例在这里.
传递给 useEffect 的函数已成功完成。它定义了一个函数,然后成功调用该函数。效果函数返回undefined
通常情况下,因此错误边界无法捕获任何内容。
错误边界并不能捕获所有可能的错误。具体来说,来自错误边界的文档:
错误边界不会捕获以下错误:
- 事件处理程序(了解更多)
- 异步代码(例如 setTimeout 或 requestAnimationFrame 回调)
- 服务端渲染
- 在错误边界本身(而不是其子级)中抛出的错误
如果您希望错误边界采取行动,那么一种选择是将错误保存在状态中并从组件主体中重新抛出它。例如:
function MyComponent() {
const [error, setError] = useState(null);
if (error) {
throw error;
}
useEffect(() => {
// If loading fails, save the error in state so the component throws when it rerenders
load().catch(err => setError(err));
}, []);
return <div>...</div>
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)