文章目录
基础样例
新建react项目,主要包含以下文件:
- 模板文件index.html
- 入口文件index.js
- 入口组件App.js
- component/Demo/index.jsx、components/Demo/index.css,即Demo组件
模板文件index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ErrorBoundary</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
入口文件index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";
ReactDOM.render(<App/>,document.getElementById("root"));
入口组件App.js
import React, { Component } from 'react'
import Demo from "./components/Demo"
export default class App extends Component {
render() {
return (
<div>
<Demo/>
</div>
)
}
}
Demo组件
Demo/index.css
.a{
width: 500px;
background: orange;
padding: 10px;
}
.b{
background: skyblue;
padding: 10px;
}
Demo/index.jsx
import React, { Component } from 'react'
import "./index.css";
export default class A extends Component {
render() {
return (
<div className="a">
<div>我是组件A</div>
<B/>
</div>
)
}
}
class B extends Component{
render(){
return (
<div className="b">
<div>我是组件B</div>
<C/>
</div>
)
}
}
使用生命周期函数:getDerivedStateFromError
getDerivedStateFromProps
必须用 static
修饰,它是类上的方法。且必须返回 null
或者状态对象(State Obect)。
当前组件的子组件发生错误时,会触发getDerivedStateFromError的调用。
代码变更涉及的文件:components/Demo/index.jsx。
import React, { Component } from 'react'
import "./index.css";
export default class A extends Component {
state = {err:""}
static getDerivedStateFromError(error){
return {
err:error
}
}
render() {
const {err} = this.state;
return (
<div className="a">
<div>我是组件A</div>
{err ? "当前网络不稳定,请稍候再试!" : <B/>}
</div>
)
}
}
class B extends Component{
state = {
users:""
}
render(){
const {users} = this.state;
return (
<div className="b">
<div>我是组件B</div>
{
users.map(userObj => (<li key={userObj.id}>{userObj.name},{userObj.age}</li>))
}
</div>
)
}
}
假设B组件(子组件)的出错:users不是一个数组,却是一个字符串。此时,会触发调用getDerivedStateFromError
,并返回状态数据{err:error}
。A组件(父组件)将根据err值判断是渲染备用的错误页面还是B组件。
使用生命周期函数:componentDidCatch
import React, { Component } from 'react'
import "./index.css";
export default class A extends Component {
state = {err:""}
static getDerivedStateFromError(error){
return {
err:error
}
}
componentDidCatch(error,info){
console.log("error:",error);
console.log("info:",info);
console.log("用于统计错误信息并反馈给后台,将通知开发人员进行bug修复")
}
render() {
const {err} = this.state;
return (
<div className="a">
<div>我是组件A</div>
{err ? "当前网络不稳定,请稍候再试!" : <B/>}
</div>
)
}
}
class B extends Component{
state = {
users:""
}
render(){
const {users} = this.state;
return (
<div className="b">
<div>我是组件B</div>
{
users.map(userObj => (<li key={userObj.id}>{userObj.name},{userObj.age}</li>))
}
</div>
)
}
}
当前组件的子组件发生错误时,会触发当前组件的 getDerivedStateFromError
和 componentDidCatch
,并携带对应的错误信息。