错误边界（Error boundary）

• 错误边界（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>
          )
      }
  }
  
  

  父组件：

  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>
      )
    }
  }
  
  

  运行结果：