ComponentDidCatch does not work

问题:

Why componentDidCatch does not work in my react-native app. componentDidCatch does not handle errors.

React native v: 50.3 React: 16.0.0 

import React, {Component} from 'react'; import {View, Text}        from 'react-native'; import Logo               from './SignUpInit/Logo'; import SignUp             from './SignUpInit/SignUp'; import Social             from './SignUpInit/Social'; import styles             from './SignUpInit/styles';  export default class SignUpInit extends Component {      state = {         componentCrashed: false,         count: 0,     }      componentDidCatch(error, info) {         console.log(error);         console.log(info);         console.log('_______DID CATCH____________');         this.setState({componentCrashed: true});     }      componentDidMount(){         setInterval(()=>this.setState({count: this.state.count+1}),1000);     }      render() {         if (this.state.componentCrashed) {             return (                 <View>                     <Text>                         Error in component "SingUpInit"                     </Text>                 </View>             );         }          if(this.state.count > 5){             throw new Error('Error error error');         }           return (             <View style={styles.main}>                 <Logo/>                 <SignUp/>                 <Social/>             </View>         );     } }

回答1:

This doesn't work because componentDidCatch() only works for catching errors thrown by a components children. Here it seems like you are trying to catch an error thrown by the same component - that's not going to work.

See the official documentation for more info:

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.

Note the "anywhere in their child component tree".

---

So all you need to do is to wrap your component inside another component that manages all errors thrown. Something like:

<ErrorBoundary>   <SignUpInit /> </ErrorBoundary> 

Where <ErrorBoundary /> is something as simple as:

class ErrorBoundary extends React.Component {   constructor(props) {     super(props);     this.state = {hasError: false};   }    componentDidCatch(error, info) {     this.setState({hasError: true});   }    render() {     if(this.state.hasError) return <div>Error!</div>;     return this.props.children;   } } 

回答2:

Try this example in expo

Also, remember that errors are caught in render but are not caught in event handlers.

Check this issue

文章来源: ComponentDidCatch does not work