《React+Redux前端开发实战》—2.4.4 错误处理
【摘要】 本节书摘来自华章计算机《React+Redux前端开发实战》一书中的第2章，第2.4.4节，作者是徐顺发.
2.4.4 错误处理
在渲染期间，生命周期方法或构造函数constructor()中发生错误时将会调用componentDidCatch()方法。
React错误处理示例：
import React from "react";
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, info) {
this.setState({
hasError: true
});
}
render() {
if (this.state.hasError) {
return <h1>这里可以自定义一些展示，这里的内容能正常渲染。</h1>;
}
return this.props.children;
}
}
在componentDidCatch()内部把hasError状态设置为true，然后在渲染方法中检查这个状态，如果出错状态是true，就渲染备用界面；如果状态是false，就正常渲染应该渲染的界面。
错误边界不会捕获下面的错误：
错误边界本身错误，而非子组件抛出的错误。
服务端渲染（Server side rendering）。
事件处理（Event handlers），因为事件处理不发生在React渲染时，报错不影响渲染）。
异步代码。
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论（0）