ReactJS componentDidCatch() 方法

如果在任何生命周期方法或任何子组件的渲染阶段发生错误，则调用 componentDidCatch() 方法。此方法用于实现 React 应用程序的错误边界。它在提交阶段调用，因此与在渲染阶段调用的 getDerivedStateFromError() 不同，此方法允许副作用。此方法也用于记录错误。

句法：

componentDidCatch(error, info)

参数：它接受两个参数，即错误和信息，如下所述：

• error：是子组件抛出的错误。
• info：它存储了哪个组件抛出此错误的 componentStack 跟踪。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

项目结构：它将如下所示。

项目结构

示例：演示使用 componentDidCatch() 方法的程序。

文件名：App.js：

Javascript

import React, { Component } from 'react';
 
export default class App extends Component {
  // Initializing the state
  state = {
    error: false,
  };
 
  componentDidCatch(error) {
    // Changing the state to true
    // if some error occurs
    this.setState({
      error: true
    });
  }
 
  render() {
    return (
      
        

          {this.state.error ? 
Some error
 : }
        
      
    );
  }
}
 
class GFGComponent extends Component {
 
  // GFGComponent throws error as state of
  // GFGCompnonent is not defined
   
  render() {
    return 
{this.state.heading}
;
  }
}

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：

输出

参考： https://reactjs.org/docs/react-component.html#componentdidcatch