错误边界（Error boundary）

只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误

getDerivedStateFromError配合componentDidCatch

案例

子组件：

import React, { Component } from 'react'

export default class Child extends Component {
    state = {
        // user: [
        //     { id: '001', name: 'sun', age: 18 },
        //     { id: '002', name: 'feng', age: 19 },
        //     { id: '003', name: 'yuan', age: 20 },
        // ],
        user: 'abc',
    }
    render() {
        return (
            <div>
                {this.state.user.map((item)=>{
                    return <li key={item.id}>{item.name}---{item.age}</li>
                })}
            </div>
        )
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

父组件：

import React, { Component } from 'react'
import Child from './child'

export default class Parent extends Component {
  state = {
    // 用于标识子组件是否产生错误
    hasError:''
  }

  // 当parent的子组件出现报错时候，会触发getDerivedStateFromError,并携带错误信息
  static getDerivedStateFromError(error) {
    console.log('getDerivedStateFromError', error);
    return {
      hasError:error
    }
  }
  componentDidCatch(){
    console.log('统计错误次数，反馈给服务器。');
  }

  render() {
    return (
      <div>
        <h3>parent</h3>
        {this.state.hasError?<h2>子组件出错了～👌</h2>:<Child></Child>}
      </div>
    )
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

运行结果：