两个生命周期函数：getDerivedStateFromError()和componentDidCatch()

最新推荐文章于 2023-03-05 11:26:23 发布

richest_qi

最新推荐文章于 2023-03-05 11:26:23 发布

阅读量678

点赞数 1

分类专栏： React17/18 文章标签： ErrorBoundary 子组件父组件

本文链接：https://blog.csdn.net/qzw752890913/article/details/125149095

版权

React17/18 专栏收录该内容

67 篇文章 4 订阅

订阅专栏

文章目录

基础样例
使用生命周期函数：getDerivedStateFromError
使用生命周期函数：componentDidCatch

基础样例

新建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 ，并携带对应的错误信息。

richest_qi

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两个生命周期函数：getDerivedStateFromError()和componentDidCatch()

新建react项目，主要包含以下文件：入口文件index.js入口组件App.jsDemo组件Demo/index.cssDemo/index.jsx使用生命周期函数：getDerivedStateFromError 必须用修饰，它是类上的方法。且必须返回或者状态对象（State Obect）。当前组件的子组件发生错误时，会触发getDerivedStateFromError的调用。代码变更涉及的文件：components/Demo/index.jsx。假设B组件（子组件）
复制链接

扫一扫