ReactJS - componentDidCatch() 方法

React 是一个流行的 JavaScript 库，用于创建用户界面。在创建 React 应用程序时，我们可能会遇到代码中的错误。当这些错误发生在 React 组件中时，正确处理它们可能是一项艰巨的任务。这是可以使用 componentDidCatch 函数的地方。因此，componentDidCatch 可以捕获组件中的错误，并防止整个应用程序崩溃。因此，我们将借助一个示例来了解它是如何工作的。

什么是 componentDidCatch？

componentDidCatch 是一个可以在 React 组件中定义的函数。它的主要功能是检测组件的任何子元素中的错误，无论位于组件树的深度如何。

当任何子组件发生错误时，React 将调用 componentDidCatch。它给了我们一个对错误做出回应的机会。

componentDidCatch 的一个常见用途是记录错误。在生产环境中，可以将其发送到错误报告服务，从而使我们能够跟踪和修复问题。

语法

 componentDidCatch(error, info)

参数

componentDidCatch 函数中使用了两个参数：error 和 info。

• error - 这是抛出的错误。它通常是 Error 对象的一个实例，但它也可以是字符串或 null。
• info - 这是有关错误的数据。它提供了一个堆栈跟踪，指示问题发生的位置以及涉及的组件。

返回值

componentDidCatch 函数不返回任何内容。它主要用于告诉错误不产生结果。

如何使用？

我们将创建一个应用程序并使用 componentDidCatch 来显示它的使用情况 -

在这个应用程序中，我们有一个 MyComponent，它故意在其 componentDidMount 函数中抛出错误以获得错误。我们将在 ErrorBoundary 中使用 MyComponent，它将捕获并处理 MyComponent 中发生的任何错误。如果 MyComponent 中发生错误，ErrorBoundary 将显示带有错误消息的自定义回退 UI。

例子

import React from 'react';

class MyComponent extends React.Component {
	 	constructor(props) {
	 	 	 super(props);
	 	 	 this.state = { data: null };
	 	} 		
	 	componentDidMount() {
	 	 	 // Try to parse invalid JSON to evoke an error.
	 	 	 try {
	 	 	 	 	JSON.parse("This is not valid JSON");
	 	 	 } catch (error) {
	 	 	 	 	throw new Error("Something went wrong in MyComponent!");
	 	 	 }
	 	} 		
	 	render() {
	 	 		
	 	 	 // Render the component as usual
	 	 	 return <div>{this.state.data}</div>;
	 	}
}
class ErrorBoundary extends React.Component {
	 	constructor(props) {
	 	 	 super(props);
	 	 	 this.state = { hasError: false, error: null };
	 	}
	 	
	 	static getDerivedStateFromError(error) {
	 	 		
	 	 	 // Update state to show a fallback UI and store the error
	 	 	 return { hasError: true, error };
	 	} 		
	 	componentDidCatch(error, info) {
	 	 	 console.error("Error caught by ErrorBoundary:", error);
	 	 	 console.error("Component Stack:", info.componentStack);
	 	} 		
	 	render() {
	 	if (this.state.hasError) {
	 	 		
	 	 	 // Render a custom fallback UI with the error message
	 	 	 return (
	 	 	 	 	<div>
	 	 	 	 	 	 <h2>Something went wrong</h2>
	 	 	 	 	 	 <p>{this.state.error.message}</p>
	 	 	 	 	</div>
	 	 	 );
	 	}
	 	
	 	// Render the child components if no error found
	 	return this.props.children;
	 	}
}
function App() {
	 	return (
	 	 	 <div>
	 	 	 	 	<h1>My App</h1>
	 	 	 	 	<ErrorBoundary>
	 	 	 	 	<MyComponent />
	 	 	 	 	</ErrorBoundary>
	 	 	 </div>
	 	);
}

export default App;

输出

示例 - 具有错误处理功能的动态表单

此应用程序显示一个动态表单，用户可以在其中将数据输入到字段中。如果在表单数据处理过程中出现错误，componentDidCatch 方法将记录错误并通知用户该问题。

import React, { Component } from 'react';

class DynamicForm extends Component {
	 	constructor(props) {
	 	 	 super(props);
	 	 	 this.state = {
	 	 	 	 	formData: {},
	 	 	 	 	hasError: false,
	 	 	 };
	 	} 		
	 	handleInputChange = (field, value) => {
	 	 	 try {
	 	 	 	 	// Logic to handle dynamic form data
	 	 	 	 	this.setState(prevState => ({
	 	 	 	 	 	 formData: {
	 	 	 	 	 	 	 	...prevState.formData,
	 	 	 	 	 	 	 	[field]: value,
	 	 	 	 	 	 },
	 	 	 	 	}));
	 	 	 } catch (error) {
	 	 	 	 	// Handle errors
	 	 	 	 	this.setState({ hasError: true });
	 	 	 }
	 	}; 		
	 	handleButtonClick = () => {
	 	 		
	 	 	 // Sending form data to a server
	 	 	 try {
	 	 	 	 	
	 	 	 	 	// Logic to send data to the server
	 	 	 	 	console.log('Sending form data:', this.state.formData);
	 	 	 } catch (error) {
	 	 	 	 	
	 	 	 	 	// Handle errors in sending data
	 	 	 	 	console.error('Error sending form data:', error);
	 	 	 	 	this.setState({ hasError: true });
	 	 	 }
	 	}; 		
	 	componentDidCatch(error, info) {
	 	 	 console.error('Form Error:', error, info);
	 	 	 this.setState({ hasError: true });
	 	} 		
	 	render() {
	 	 	 if (this.state.hasError) {
	 	 	 	 	return <div>Sorry, there was an issue with the form.</div>;
	 	 	 }
	 	 		
	 	 	 return (
	 	 	 	 	<div>
	 	 	 	 	 	 <h1>Dynamic Form</h1>
	 	 	 	 	 	 <input
	 	 	 	 	 	 	 	type="text"
	 	 	 	 	 	 	 	placeholder="Field 1"
	 	 	 	 	 	 	 	onChange={e => this.handleInputChange('field1', e.target.value)}
	 	 	 	 	 	 />
	 	 	 	 	 	 <input
	 	 	 	 	 	 	 	type="text"
	 	 	 	 	 	 	 	placeholder="Field 2"
	 	 	 	 	 	 	 	onChange={e => this.handleInputChange('field2', e.target.value)}
	 	 	 	 	 	 />
	 	 	 	 	 	 <button onClick={this.handleButtonClick}>Send Data</button>
	 	 	 	 	</div>
	 	 	 );
	 	}
}

export default DynamicForm;

输出

当用户单击“发送数据”按钮时，表单数据将被记录到控制台。我们可以将 handleButtonClick 方法中的 console.log 语句替换为使用 fetch 将数据发送到服务器的实际逻辑。

笔记

• 过去，开发人员在 componentDidCatch 中使用 setState 来更改用户界面并显示错误警告。这种方法现在被认为是过时的。为了处理错误，最好使用静态 getDerivedStateFromError。
• 在开发和生产中，React 的行为有所不同。在开发中，componentDidCatch 将捕获错误并将其发送到浏览器的全局错误处理程序。它们不会在生产中冒泡，因此我们必须使用 componentDidCatch 显式捕获它们。

总结

componentDidCatch 是一个有用的 React 特性，它使我们能够正确管理组件中的错误。这就像拥有一个安全网，可以记录错误并允许我们记录错误或显示错误消息。请记住，它应该与 getDerivedStateFromError 结合使用，并且开发和生产设置之间存在更改。