react边界错误问题优化

Posted 2021-09-13 万年打野易大师

理解：

错误边界(Error boundary)：用来捕获后代组件错误，渲染出备用页面

特点：

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

使用方式：

getDerivedStateFromError 配合 componentDidCatch

// 生命周期函数，一旦后台组件报错，就会触发
static getDerivedStateFromError(error) {
    console.log(error);
    // 在render之前触发
    // 返回新的state
    return {
        hasError: true,
    };
}
// 渲染组件出错，会调用这个生命周期函数
componentDidCatch(error, info) {
    // 统计页面的错误。发送请求到后台去,配合后台产生对应的错误反馈机制，比如邮件或者短信通知
    console.log(error, info);
}

示例：

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

  //当Parent的子组件出现报错时候，会触发getDerivedStateFromError调用，并携带错误信息
  static getDerivedStateFromError(error) {
    console.log(\'@@@\', error)
    return { hasError: error }
  }

  componentDidCatch() {
    console.log(\'此处统计错误，反馈给服务器，用于通知编码人员进行bug的解决\')
  }

  render() {
    return (
      <div>
        <h2>我是Parent组件</h2>
        // 可以使用用户心理学方法，网络不稳定等提醒方式
        {this.state.hasError ? <h2>当前网络不稳定，稍后再试</h2> : <Child />}
      </div>
    )
  }
}

class Child extends Component {
  state = {
    users: [
      { id: \'001\', name: \'tom\', age: 18 },
      { id: \'002\', name: \'jack\', age: 19 },
      { id: \'003\', name: \'peiqi\', age: 20 }
    ]
  }

  render() {
    return (
      <div>
        <h2>我是Child组件</h2>
        {this.state.users.map(userObj => {
          return (
            <h4 key={userObj.id}>
              {userObj.name}----{userObj.age}
            </h4>
          )
        })}
      </div>
    )
  }
}